本文详解如何在 Ext JS 7.2 的 Ext.grid.Panel 中扩展默认列头点击排序行为，实现「单击升序 → 双击降序 → 三击清空排序」的交互逻辑，并提供可直接运行的代码示例与关键注意事项。
本文详解如何在 ext js 7.2 的 `ext.grid.panel` 中扩展默认列头点击排序行为，实现「单击升序 → 双击降序 → 三击清空排序」的交互逻辑，并提供可直接运行的代码示例与关键注意事项。
在 Ext JS 7.2 中，网格（Ext.grid.Panel）默认仅支持两态排序：首次点击列头触发升序（ASC），二次点击切换为降序（DESC），第三次及以后点击仍维持 DESC，无法自动清除排序状态。若需实现“三击清空排序”这一更符合用户直觉的交互（如 Excel 或现代 Web 表格），必须手动拦截 headerclick 事件并管理排序状态机。
核心思路是：维护一个列级点击计数器（clickCount）和最近点击列引用（lastClickedColumn），在每次列头点击时判断是否为同一列连续点击，并据此执行 ASC / DESC / clear 三种操作。注意：不能依赖 store.getSorters().remove(...) 直接移除 sorter（易引发 undefined 错误），而应使用 sorters.clear() 彻底清空所有排序器，再调用 store.load() 触发重载。
以下是推荐的完整实现方案（已适配 Ext JS 7.2+）：
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name',
sortable: true
}, {
text: 'Email',
dataIndex: 'email',
flex: 1,
sortable: true
}, {
text: 'Phone',
dataIndex: 'phone',
sortable: true
}],
height: 200,
width: 400,
renderTo: Ext.getBody(),
listeners: {
headerclick: function (grid, column, e, eOpts) {
const store = grid.getStore();
const dataIndex = column.dataIndex;
// 初始化状态变量（建议挂载到 grid 实例上，避免全局污染）
if (!grid._sortClickState) {
grid._sortClickState = { count: 0, lastColumn: null };
}
const state = grid._sortClickState;
if (state.lastColumn === column) {
state.count++;
} else {
state.lastColumn = column;
state.count = 1;
}
switch (state.count) {
case 1:
store.sort(dataIndex, 'ASC');
break;
case 2:
store.sort(dataIndex, 'DESC');
break;
case 3:
store.getSorters().clear(); // ✅ 安全清空排序器
store.load(); // ✅ 显式重载以应用无排序状态
state.count = 0; // 重置计数，下次点击即为新循环起点
break;
}
}
}
});
✅ 关键要点说明：
- 状态托管：将 count 和 lastColumn 存于 grid._sortClickState 而非全局变量，确保多网格实例互不干扰；
- store.sort() 优于手动操作 sorters 集合：它会自动处理 sorter 创建、去重与同步，避免 getByKey() 返回 undefined 导致的崩溃；
- sorters.clear() + store.load() 是清空排序的正确组合：clear() 移除所有 sorter，load() 强制刷新数据（若 store 已启用 autoLoad: true，亦可省略 load()，但显式调用更可控）；
- 无需修改列配置：保持 sortable: true 即可，所有逻辑由事件监听器接管，完全兼容原生列头箭头渲染；
- 兼容性保障：该方案在 Ext JS 7.2–7.6 均验证通过，不依赖私有 API，符合 Sencha 官方最佳实践。
⚠️ 注意事项：
- 若网格启用了远程分页（remoteSort: true），store.load() 将自动携带 sorters: [] 参数请求服务端，确保后端返回未排序数据；
- 如需恢复“原始加载顺序”（非数据库默认顺序），请确保 Store 的 data 源未预设 sorter，或在 clear() 后调用 store.sort() 不带参数（Ext JS 7.2+ 支持 store.sort(null) 清空并保留原始顺序）；
- 避免在 headerclick 中使用 e.stopEvent()，否则将禁用列头箭头图标自动切换，破坏 UI 反馈一致性。
通过以上实现，你即可在不侵入 Ext JS 内核、不修改下拉菜单的前提下，优雅地交付符合用户预期的三态列头排序体验。
