Question

我已经实现了一个Web应用程序，其中包含一个GridPanel，可以对其进行分组或取消分组，并且行应按字母顺序排序（如标准网格排序函数那样），但有些行代表汇总行不应该完全排序，应保持在同一行位置。

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

我使用的是ExtJs 3.4版。

非常感谢提前。

干杯，

Seha

Answer 1

要对作为网格面板基础的商店数据进行排序，请使用Ext.data.Store.sort（）方法。您可以在特定商店实例中覆盖该方法。

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

Answer 2

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

你可以在GridPanel或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）添加到数据存储中。

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

2 个答案: