How to implement custom row sorting for a ExtJS GridPanel

Question

I have implemented a Web - Application which features a GridPanel which can be grouped or ungrouped and where the rows should be sorted alphanumerically (like the standard grid sorting function does) but with the exception that some rows which represent summary rows should not be sorted at all and should stay at the same row position.

To archieve this i wanted to write a custom row sorting function for the gridpanel. Can someone give me a hint how to archive this ? (overwrite which functions, how to implement). Or does anybody know literature, tutorials, examples etc. or could share source code on how this can be done ?

I am using ExtJs Version 3.4.

Many thanks in advance.

Cheers,

Seha

Answer 1

To sort the store data that underlies a gridpanel, the Ext.data.Store.sort() method is used. You can override that method in your particular store instance.

The other possibility is to set remoteSort to true and sort the data on the server.

Answer 2

Here is some sample code that worked for me in ExtJS 3.4.

You can use this in a GridPanel or EditorGridPanel, I placed it in the constructor using an inherited class, but you should be able to add it if you are instantiating a vanilla grid as well, just make sure you are not using the global variable scope.

Make sure the grid variable contains a reference to your grid (after it has been defined).

// Apply column 'sortBy' overrides
var column, columns = grid.getColumnModel() && grid.getColumnModel().config;
var sortColumns = {}, sortByInfo = {};
if (columns && columns.length) {
    for (var i = 0; i < columns.length; i++) {
        column = columns[i];
        // Do we have a 'sortBy' definition on a column?
        if (column && column.dataIndex && column.sortBy) {
            // Create two hashmap objects to make it easier 
            // to find this data when sorting 
            // (using 'if (prop in object)' notation)
            sortColumns[column.dataIndex] = column.sortBy;
            sortByInfo[column.sortBy] = column.dataIndex;
        }
    }
    if (!$.isEmptyObject(sortColumns)) {
        // Override the 'getSortState()' helper on the store, this is needed to
        // tell the grid how its currently being sorted, otherwise it
        // will get confused and think its sorted on a different column.
        grid.store.getSortState = function() {
            if (this.sortInfo && this.sortInfo.field in sortByInfo)
                return { field: sortByInfo[this.sortInfo.field], direction: this.sortInfo.direction || 'ASC' };
            return this.sortInfo;
        }
        // Override the default sort() method on the grid store
        // this one uses our own sorting information instead.
        grid.store.sort = function(field, dir) {
            var sort = this.constructor.prototype.sort;
            if (field in sortColumns) {
                return sort.call(this, sortColumns[field], dir);
            } else {
                return sort.call(this, field, dir);
            }
        }
    }
}

Then just add a sortBy entry to your column definition:

 colModel: new Ext.grid.ColumnModel({
    defaults: {
        sortable: true  
    },
    columns: [
    {
        header: 'Name',
        dataIndex: 'name',
        width: 350
    }, {
        header: 'Code',
        dataIndex: 'code_summary',
        sortBy: 'code_sort_order',
        width: 100
    }, {
        header: 'Start Date',
        dataIndex: 'start_date',
        width: 85
    }]
}),

PS: dont forget to add the field you are sorting on (code_sort_order) to your data store.