Sorting one column based on another column in ExtJs 4.1 grid

Question

I am using ExtJs 4.1 framework. I have a grid which shows only one column (Name). The grid is associated with a store which have two fields (Name and SortOrder). The field "name" in store is associated with Name column of the grid. I want to sort the name column based on the value available in SortOrder field in the store. How can I implement such logic.

Thank you

Answer 1

Do you mean something like this:

...
columns: [{
    header: 'Name',
    dataIndex: 'Name',
    sortable: true,
    doSort: function(state){
        var ds = this.up('tablepanel').store;
        ds.sort({
            property: 'SortOrder',
            direction: state
        });
    }
    ....    
}]

Answer 2

There is also a little simpler solution:

...
columns: [{
    header: 'Name',
    dataIndex: 'Name',
    sortable: true,
    getSortParam: function() {
        return 'SortOrder';
    }
...
}]
...

So instead of overriding doSort() you can just override getSortParam() method (which is used by doSort()).

Answer 3

Another way to do that on Header click.

columns: [
    {
        header: 'Name',
        dataIndex: 'Name',
        listeners: {
            headerclick: function() {
                var store = this.up('grid').getStore();
                store.sort({
                        property: 'SortOrder',
                        direction: this.sortState
                    });
            }
        }
    }
 ]