Extjs 4.1 UX that will allow multiple remote sorting on columns, and display multiple directional icons

Posted on by

Why?

Ok, so I have come across the need to perform multiple sorting on many occasions, and like most people got a little frustrated with the drag and drop toolbar method that is given in the Extjs examples. I wanted something that the user would intuitively understand since they were used to clicking rows to perform sorting anyway, and I wanted them to see what was being sorted in the same manner that the native sort works. You know that small blue triangle in your column header. It became apparent that this would be a feature that could be used over and over again as this is a really common request so I put together this UX for your Extjs 4.1 grids. I did not do any testing on versions prior to 4.1, so maybe it will work for those, maybe not, consider that fair warning.

Where to get the InlineRemoteMultiSort UX

https://github.com/jmcdonald69124/extjs-multisort-ux

How to use the InlineRemoteMultiSort UX

In your javascript code please make sure you place the files in the following folder, where extjs could be the root of your extjs distribution:

extjs/src/ux/ folder, and place the CSS file in the extjs/src/ux/css folder.

In your grid add the plugin, and pass it the initial ‘default’ sort values.

plugins : [
Ext.create('Ext.ux.InlineRemoteMultiSort', {
 defaultSorters: [
 {property:'col1',   direction:'ASC'},
 {property:'col2',   direction:'ASC'},
 {property:'col3',   direction:'ASC'}
    // ....
 ]
})
]

Of course this assumes that you set your path to the ux folder correctly in your MVC app.js file.

On the server watch out for the following values that are passed in a parameter called ‘sort’:

sort:[
{'item':'col1','direction':'ASC'},
{'item':'col2','direction':'ASC'},
{'item':'col3','direction':'ASC'}
]

If you are using Cold Fusion for your back end code you can parse the incoming form value with this code:

<cfset sorters = deserializeJSON(#form.sort#) />

Watch out for the following

This code will pass a set of brackets [ ] if there are no sorters, please handle this on the server side.

Paging poses a set of issues that will require that the query return the rows that are needed by the page the user is viewing. If you intend to use paging please see this post and pay particular attention to how it uses the start and page number
http://www.learnsomethings.com/2011/11/06/php-code-for-paging-and-remote-filtering-extjs4-grids/ .

Leave a Reply