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

Question

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

Nope, you are right. As long as you wont call a method explicitly afaik you will be lost. We had the same issue and we have overwritten the header functionality that the third sort will clear it. Basically (up, down, remove). You need to take care that removing the sorter on the store sometimes wont update the sort direction in the column header. — hwsw, May 01 '21 at 12:33

score 1 · Accepted Answer · answered May 02 '21 at 21:10

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

Thank you for posting this. There is one tiny issue, and I am going to look into it. I enabled multi-column sort for my grid. The issue is that it doesn't seem to remove the last sorting order. Steps: sort by column 1, sort by column 2, clear sort column 1 (ok), clear sort column 2 (it is not changed). Clear sort column 2 doesn't seem to work - the sorting is not removed. I use remote sorting, and remote filtering. I will get back to you. — boggy, May 03 '21 at 22:35
Just to be clear, it looks like Extjs doesn't update the column header to remove the sorting indicator (i.e. the arrow beside the column caption), and the store is not refreshed as it is done when I clear the sorting for the column 1. — boggy, May 03 '21 at 22:48
ok, I need to set this to true: https://docs.sencha.com/extjs/6.6.0/classic/Ext.data.Store.html#cfg-reloadOnClearSorters. Easy enough. — boggy, May 03 '21 at 23:39
Coming back - if I don't use remote sorting, I still have the issue I mentioned in the first comment *sigh*. Not sure that solution is in this case. I cannot have remote sorting. — boggy, Apr 01 '22 at 06:25

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

1 Answers1