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

enxuqcxy  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(210)

我使用ExtJs 6.6.0 Classic. grid组件支持多列排序(我使用remoteSort:true,远程筛选器:true)。每当用户单击列标题时,该列将成为排序依据列表中的第一列。但我找不到最终用户应该如何清除列的排序。通过列标题可用的上下文菜单没有“清除排序”选项。
另请参阅此厨房Flume示例。
我觉得我遗漏了一些东西。有一个从标题继承的列sortClearText配置,但我找不到使用它的地方(我想也许有一些配置可以用来将“清除排序”菜单项添加到列上下文菜单中)。
我可以添加一个按钮来执行清除存储排序的操作,作为最后的手段,但我不喜欢这样做。
是否有一种简单的方法可以通过Extjs组件配置为网格列添加“清除排序”选项?
谢谢你

72qzrwbm

72qzrwbm1#

我也没有找到,但可以用下面的重写:

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

相关问题