最终用户如何清除网格列的排序

Question

我使用ExtJs 6.6.0 Classic。网格组件支持多列排序(我使用remoteSort:true，remoteFilter:true(。每当用户单击列标题时，该列就会成为按顺序列表中的第一列。但我找不到最终用户应该如何清除列的排序。通过列标题可用的上下文菜单没有"；清除排序"；选项

另请参阅此厨房水槽示例。

我觉得我错过了什么。从标题继承的列有一个sortClearText配置，但我找不到它的使用位置(我想也许有一些配置可以用来将Clear Sort菜单项添加到列上下文菜单中(。

作为最后的手段，我可以添加一个按钮来执行清除商店排序的操作，但我不喜欢

有没有一种简单的方法可以通过Extjs组件配置为网格列添加Clear Sort选项？

谢谢

Answer 1

我也没有找到，但您可以使用以下覆盖：

Ext.define('overrides.grid.header.Container', {
override: 'Ext.grid.header.Container',

getMenuItems: function() {
var me = this,
menuItems = [],
hideableColumns = me.enableColumnHide ? me.getColumnMenu(me) : null;

if (me.sortable) {
menuItems = [{
itemId: 'ascItem',
text: me.sortAscText,
iconCls: me.menuSortAscCls,
handler: me.onSortAscClick,
scope: me
}, {
itemId: 'descItem',
text: me.sortDescText,
iconCls: me.menuSortDescCls,
handler: me.onSortDescClick,
scope: me
}, {
itemId: 'dropSortItem',
text: me.sortClearText,
//iconCls: me.menuSortDescCls, // Your icon
handler: me.onSortClearClick,
scope: me
}];
}

if (hideableColumns && hideableColumns.length) {
if (me.sortable) {
menuItems.push({
itemId: 'columnItemSeparator',
xtype: 'menuseparator'
});
}

menuItems.push({
itemId: 'columnItem',
text: me.columnsText,
iconCls: me.menuColsIcon,
menu: hideableColumns,
hideOnClick: false
});
}

return menuItems;
},

onSortClearClick: function() {
var menu = this.getMenu(),
activeHeader = menu.activeHeader,
store = this.up('grid').getStore();
store.getSorters().each(function(sorter) {
if(sorter.initialConfig.property == activeHeader.dataIndex) {
store.getSorters().remove(sorter)
}       
}, this);
}
});