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)

Demonstration

The EXTJS in XPages demonstration database can be found at http://demo.xomino.com/xomino/Extjs.nsf/xGridWithInfiniteScroller.xsp

Download

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

Introduction

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:

remoteSort: true,

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

_dc	1363479015660
count	20
dir	ASC
keys
limit	20
page	4
sort	address
start	60

The sort parameter signifies teh field to be sorted and the dir (ASC or DESC) tells which direction

The View

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:

<xe:this.sortOrder>
<![CDATA[#{javascript:
	var direction = context.getUrlParameter('dir');
		switch(direction)
		{
		case 'ASC':
			return 'ascending'
			break;
		case 'DESC':
			return 'descending'
			break;
		default:
			return 'ascending'							}
		}]]>
</xe:this.sortOrder>

This code takes the incoming “dir” UrlParameter and returns the expected ascending or descending value based on the JavaScript switch/case statement.

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

context.getUrlParameter('sort');

Conclusion
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.