View Full Version : Custom sort in tree column. Sorter in store impelmented, but the column uses its own

18 Feb 2013, 4:45 AM
hi all
this is the code in tree store

Ext.define('data.store.AssetTreeStore', {
extend: 'Ext.data.TreeStore',
sorters: [
// natural sort
sorterFn: function (rec1, rec2) {
<some code>

When the tree is first time loaded (on page load) the items are sortet using the sorter I implemented in store. But when I click on the header the tree uses its own sorter.

What I'm doing wrong?

22 Feb 2013, 9:14 AM
When you click on the tree grid column header, it will only use the one sorter based on the header. It won't add a sort to the existing array of sorters.

25 Feb 2013, 1:27 AM
Well, that's clear to me.
But when you look at this example http://jsfiddle.net/cvdNW/3/
you will find the sort implemented in store and used on header click.

So the right question is: how can I use a custom sort on header click in a tree column?
And I can't apply it to a field in the model, because this would affect other components thas are using the model.

All solutions I found use the store to impelment a custom sort.

4 Mar 2013, 8:11 AM
I've got it.

I have to add the 'sort' function to the store.

sort: function(sorters, direction) {
var me = this;

if(sorters && sorters.property == 'title') {
if(sorters.direction == 'ASC') {
return this.doSort(function(rec1, rec2) {
return Util.String.compareNatural(rec1.get('title'), rec2.get('title'));
} else {
return this.doSort(function(rec1, rec2) {
return -Util.String.compareNatural(rec1.get('title'), rec2.get('title'));

return me.callParent(arguments);