Custom sort in tree column. Sorter in store impelmented, but the column uses its own

[Kotolom]

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?

[mitchellsimoens]

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.

[Kotolom]

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.

[Kotolom]

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);
    }