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

Posted 2023-02-26

【中文标题】如何为 ExtJS GridPanel 实现自定义行排序

【英文标题】：How to implement custom row sorting for a ExtJS GridPanel

【发布时间】：2011-11-08 13:00:45

【问题描述】：

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

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

我正在使用 ExtJs 3.4 版。

非常感谢。

干杯，

塞哈

【参考方案1】：

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

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

【讨论】：

嗨，约翰，感谢您的回复。我的问题是，我必须重写什么，因为 Ext.data.Store.sort() 方法调用其他方法来完成工作。检查源代码后，我找到了解决方案。在我的情况下，我必须覆盖商店实例中的“createSortFunction”方法。

【参考方案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) 添加到您的数据存储中。