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

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

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

另见厨房水槽 example。

我觉得我错过了一些东西。从标题继承的列有一个 sortClearText 配置，但我找不到使用它的地方（我想也许有一些配置可以用来将清除排序菜单项添加到列上下文菜单）。

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

是否有一种简单的方法可以通过 Extjs 组件配置为网格列添加清除排序选项？

谢谢

解决方法

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

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,{
                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);
    }
});