sorting - 如何为 ExtJS GridPanel 实现自定义行排序

Question

我已经实现了一个 Web - 应用程序，它具有一个可以分组或取消分组的 GridPanel，并且行应该按字母数字排序（就像标准网格排序功能一样），但代表摘要行的某些行不应该在all 并且应该保持在同一行位置。

为了实现这一点，我想为网格面板编写一个自定义行排序函数。有人可以给我一个提示如何存档吗？（覆盖哪些功能，如何实现）。或者有人知道文献、教程、示例等，或者可以分享如何做到这一点的源代码吗？

我正在使用 ExtJs 3.4 版。

提前谢谢了。

干杯，

塞哈

Answer 1

为了对网格面板下的存储数据进行排序，使用了 Ext.data.Store.sort() 方法。您可以在您的特定商店实例中覆盖该方法。

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

Answer 2

这是一些在 ExtJS 3.4 中对我有用的示例代码。

您可以在 a GridPanelor中使用EditorGridPanel它，我使用继承的类将它放在构造函数中，但是如果您也实例化 vanilla 网格，您应该能够添加它，只要确保您没有使用全局变量范围。

确保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）添加到您的数据存储中。