Ext.js 7.2 Grid实现列头第三次点击清除排序功能需求及问题

要实现列头三次点击循环（ASC→DESC→清除排序），你需要重写Grid的列头点击逻辑，替代默认的排序循环行为。以下是具体实现方案：

核心思路 #

• 监听Grid的headerclick事件，阻止默认排序行为
• 跟踪当前列的排序状态（无排序/ASC/DESC），按点击次数切换状态
• 同步更新Store的排序规则和列头的UI箭头状态

完整代码实现 #

Ext.define('MyApp.view.BaseGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'basegrid',

    initComponent: function() {
        this.callParent(arguments);
        // 绑定列头点击事件处理
        this.on('headerclick', this.handleHeaderSortToggle, this);
    },

    handleHeaderSortToggle: function(grid, column, e) {
        // 阻止默认排序逻辑，避免冲突
        e.stopEvent();

        const store = grid.getStore();
        const dataIndex = column.dataIndex;
        const currentDir = column.getSortDirection();
        let newDir;

        // 切换排序状态：无排序 → ASC → DESC → 无排序
        switch(currentDir) {
            case null:
                newDir = 'ASC';
                break;
            case 'ASC':
                newDir = 'DESC';
                break;
            case 'DESC':
                newDir = null;
                break;
        }

        if (newDir) {
            // 设置列排序，replace: true表示替换现有排序（单列排序模式）
            store.sort({
                property: dataIndex,
                direction: newDir,
                replace: true
            });
            // 更新列头UI箭头
            column.setSortDirection(newDir);
        } else {
            // 清除当前列的排序规则
            const sorters = store.getSorters();
            const targetSorter = sorters.getByKey(dataIndex);
            
            if (targetSorter) {
                sorters.remove(targetSorter);
                // 若所有排序规则都被清除，重置所有列的排序状态
                if (sorters.length === 0) {
                    grid.headerCt.items.each(col => col.setSortDirection(null));
                }
                // 触发Store数据更新（无需reload，Store会自动处理）
                store.fireEvent('datachanged', store);
            }
        }
    }
});

原代码报错原因分析 #

你之前的代码报错大概率是以下原因：

1. 未阻止默认排序行为，导致自定义逻辑与ExtJS默认排序逻辑冲突
2. currentSorter可能为null时执行sorters.remove(currentSorter)，引发错误
3. 调用store.reload()多余，Store在排序规则变更后会自动刷新数据，无需手动重载

补充说明 #

• 若需要支持多列排序，只需移除store.sort中的replace: true配置，这样每次点击会添加/切换当前列的排序规则，而非替换
• 确保列的sortable属性为true（默认开启），否则列头点击不会触发事件

内容的提问来源于stack exchange，提问作者Dilani