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

【问题标题】：How does an end user clear the sorting for a grid column?最终用户如何清除网格列的排序？
【发布时间】：2021-07-24 01:27:39
【问题描述】：

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

另请参阅此厨房水槽example。

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

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

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

谢谢

【问题讨论】：

不，你是对的。只要您不明确调用方法afaik，您就会迷失方向。我们遇到了同样的问题，我们已经覆盖了第三次排序将清除它的标题功能。基本上（上，下，删除）。您需要注意，删除存储中的排序器有时不会更新列标题中的排序方向。

标签： extjs extjs6 extjs7

【解决方案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);
    }
});

【讨论】：

感谢您发布此信息。有一个小问题，我要研究一下。我为我的网格启用了多列排序。问题是它似乎没有删除最后的排序顺序。步骤：按第1列排序，按第2列排序，清除第1列排序（ok），清除第2列（不变）。清除排序列 2 似乎不起作用 - 排序未删除。我使用远程排序和远程过滤。我会回复你的。
为了清楚起见，Extjs 似乎没有更新列标题以删除排序指示符（即列标题旁边的箭头），并且商店没有像完成时那样刷新我清除了第 1 列的排序。
好的，我需要将其设置为 true：docs.sencha.com/extjs/6.6.0/classic/…。很简单。