extjsextjs6extjs7

How does an end user clear the sorting for a grid column?


I use ExtJs 6.6.0 Classic. The grid component supports multi-column sorting (I use remoteSort: true, remoteFilter: true). Whenever the user clicks on a column header, that column becomes the first column in the order by list. But I cannot find how an end user is supposed to clear the sorting for a column. The context menu available through the column header doesn't have a "Clear Sort" option.

See also this kitchensink example.

I feel like I am missing something. There is a sortClearText config for the column inherited from the header, but I could not find a place where it's used (I thought that perhaps there is some config I can use to add the Clear Sort menu item to the column context menu).

I could add a button to execute the action of clearing the sorting of the store, as a last resort, but I don't like it.

Is there a simple way to add a Clear Sort option for a grid column through the Extjs components configuration?

Thank you


Solution

  • I also did not find, but you can use the following override:

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