In this article I will demonstrate how use the remote sorting feature from within the EXTJS grid
EXTJS in XPages series
Here are links to all of the previous articles in this series
- EXTJS in XPages #5 – Infinite scroller
- EXTJS in XPages #4 – Adding a Pager
- EXTJS in XPages #3 – Creating a basic grid from a Custom Control
- EXTJS in XPages #2 – Basic Grid capabilities
- EXTJS in XPages #1 – Starting from scratch (the first grid)
The EXTJS in XPages demonstration database can be found at http://demo.xomino.com/xomino/Extjs.nsf/xGridWithInfiniteScroller.xsp
The sample database that will accompany this series is available from the menu in the live demo database from this link – http://demo.xomino.com/xomino/Extjs.nsf
As we saw in the previous article we are able to utilize the infinite scroller to provide users a long list of documents to scroll through without taking up excessive memory at any one time. The local downside of this is that when you click on a column header to sort the column it only sorts the documents in view and not the whole list.
Using the sort property of the REST service we are able to perform this task simply and effectively.
The grid properties
Within the grid we have to signify that we are using remote sorting. We do this using the remoteSort property of the store:
This tell the grid to use the remote sort capability when the user click on a column header.
The parameters sent to the REST service
When the user clicks on a column header a URL call is made to the REST service to reload the data. Two additional parameters are sent to the service through the Query_String “sort=” and “dir”
Parameters sent to the REST service
The sort parameter signifies teh field to be sorted and the dir (ASC or DESC) tells which direction
Within the notes view, to make this capability possible, we must have the view column sortable in both directions.
This does have one potentially enormous downside……view index size. Magnified by the number of columns which all need to be sortable in both directions and especially if you have Readers and Authors fields in the documents. But I am sure you know about these risks and I will not bore you with them – just remember it is a consideration when using this capability.
The REST service
The REST service has two properties we will need: sortColumn and sortOrder. Looking closely at the sortOrder though we see that the REST service is expecting “ascending” or “descending” as its options. We are going to have to turn ASC and DESC into ascending and descending appropriately.
Within the REST service properties we can see the sortColumn and sortOrder options. Selecting to compute the sortOrder we add the following SSJS code to the property:
In the sortColumn property we do a similar thing by taking the incoming UrlParameter, but in the case no changes are needed because the field name already matches the programmatic column name in the view
And that is it – we have seen in this article how we can use SSJS in a REST service property to change the incoming UrlPramter to return the value needed by the REST service and in doing that we have enabled remote sorting of view columns.