如何在Sencha Grid中保留列的排序顺序

Sencha Grid默认点击列头排序时会替换已有排序规则，要实现保留之前的排序状态、支持多列叠加排序，可通过以下两种方式实现：

方式1：开启原生多列排序（需快捷键配合） #

直接给Grid配置multiSort: true，用户按住Ctrl（Windows）/Cmd（Mac）点击列头时，就能叠加排序规则，不会清除已有排序：

Ext.create('Ext.grid.Panel', {
    // 其他Grid配置（如store、width等）
    multiSort: true,
    columns: [
        { text: '姓名', dataIndex: 'name', sortable: true },
        { text: '年龄', dataIndex: 'age', sortable: true },
        { text: '部门', dataIndex: 'dept', sortable: true }
    ]
});

方式2：无需快捷键，点击直接叠加排序 #

如果要实现点击列头直接叠加排序（无需按住快捷键），可以监听Grid的sortchange事件，手动维护排序集合：

Ext.create('Ext.grid.Panel', {
    // 其他Grid配置
    columns: [
        { text: '姓名', dataIndex: 'name', sortable: true },
        { text: '年龄', dataIndex: 'age', sortable: true },
        { text: '部门', dataIndex: 'dept', sortable: true }
    ],
    listeners: {
        sortchange: function(grid, sortInfo) {
            const store = grid.getStore();
            const existingSorters = store.getSorters().clone();
            const newSorter = sortInfo[0];

            // 检查当前列是否已在排序规则中
            const existingIndex = existingSorters.findBy(sorter => 
                sorter.getProperty() === newSorter.getProperty()
            );

            if (existingIndex !== -1) {
                // 已存在则切换排序方向
                const targetSorter = existingSorters.getAt(existingIndex);
                targetSorter.setDirection(targetSorter.getDirection() === 'ASC' ? 'DESC' : 'ASC');
            } else {
                // 不存在则添加新排序规则
                existingSorters.add(newSorter);
            }

            // 重新设置排序，阻止默认的替换行为
            store.sort(existingSorters);
            return false;
        }
    }
});

关键注意点 #

• 确保列的sortable属性为true（默认开启，若手动设为false则无法触发排序）；
• 自定义Store时不要重写sort方法，避免破坏多列排序逻辑；
• 方式2中返回false是为了阻止Grid默认的“替换已有排序”行为，确保我们手动维护的排序规则生效。

内容的提问来源于stack exchange，提问作者Subash .V