如何实现ExtJS GridPanel的自定义行排序

Question

我实现了一个Web应用程序，它的特点是GridPanel可以分组或不分组，其中的行应该按字母数字排序(就像标准的网格排序函数一样)，但例外的是，一些代表汇总行的行不应该被排序，应该保持在相同的行位置。

为了实现这一点，我想为gridpanel编写一个自定义的行排序函数。谁能给我个提示如何存档这个?(覆盖哪些功能，如何实现)。或者有谁知道文献，教程，例子等，或者可以分享源代码，如何做到这一点?

我使用ExtJs版本3.4.

提前感谢。

欢呼,

Seha

Answer 1

要对gridpanel底层的存储数据进行排序，使用Ext.data.Store.sort()方法。您可以在特定的存储实例中重写该方法。

另一种可能性是将remoteSort设置为true，并对服务器上的数据进行排序。

Answer 2

以下是ExtJS 3.4中为我工作的一些示例代码。

你可以在GridPanel或EditorGridPanel中使用它，我使用继承类将它放在构造函数中，但是如果你正在实例化一个香草网格，你应该能够添加它，只要确保你没有使用全局变量作用域。

确保grid变量包含对网格的引用(在它被定义之后)。

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

然后在列定义中添加一个sortBy条目:

 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:不要忘记将您正在排序的字段(code_sort_order)添加到您的数据存储