how to add custom sorting to ext grid

Question

Lets say I have the data set:

[{ id: 1, name: "C" }, { id: 2, name: "A" }, { id: 3, name: "D" }]

When I build up the columns for the grid similar to this:

this.columns = 

{
        id: {
            hidden: true
        }, 

        name: {
            text: 'Name',
            editor: {
                xtype: "textfield"
            }
        }
};

When I sort the 'Name' column, I want it to be sorted by the 'id' and not alphabetically.

So instead of sorting like this: A, C, D I want it to be: C, A, D

I've tried using dataIndex: 'id' on the name column and then mapping the id to the correct name for displaying purposes, but that interferes with my editing functionality.

Is there an easy way in Ext (I'm using Ext 4.2) to sort the name column by ids?

FYI, you don't need to add an hidden id column just for the purpose of sorting on it. It just needs to be present in the store. — rixo

rixo rixo · Accepted Answer · 2013-06-22T00:29:46

Just configure the sorters option of the store:

store: {
    ...
    sorters: [{property: 'id', direction: 'ASC'}]
}

Or the sort method...

how to add custom sorting to ext grid

1 Answers