Cómo implementar la clasificación de filas personalizada para un GridPanel de ExtJS

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.

Muchas gracias de antemano.



preguntado el 08 de noviembre de 11 a las 13:11

2 Respuestas

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.

respondido 08 nov., 11:19

Hi John,thanks for your reply. My problem was, what do i have to override, because the Ext.data.Store.sort() method calls other methods to get the work done. After examing the source code i found the solution. In my case i had to override the "createSortFunction" method in the store instance. - ExtJs Animal

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

Puedes usar esto en un 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.

Asegúrese de que el 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);

Entonces solo agrega un 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.

Respondido el 02 de enero de 15 a las 05:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.