How to sort 'Columns' in grid header column menus in Ext Js 6.5.2

Question

Currently I am working with Ext JS 6.5.2.. And I am facing issue in sorting the grid columns menu Items.

I want to sort column list but remember I do not want to sort column header. This image may give you clear visualization that I only want to sort the menu list but it should not affect my grid header order. Sort only RED colored list but not GREEN color. Please refer this image.

*Note : I do not need any sorting based on data.

Answer 1

You can achieve this by using headermenucreate event of grid.

Code snippet:

listeners: {
    headermenucreate: function (grid, menu, headerCt, eOpts) {
        //Fired immediately after the column header menu is created
        var columnItems = menu.down('[itemId=columnItem]'),
            menuItems = columnItems.menu.items.items;
        //sorting by column's "text" in ascending order
        menuItems.sort(function (a, b) {
            var nameA = a.text.toLowerCase(),
                nameB = b.text.toLowerCase()
            if (nameA < nameB) //sort string ascending
                return -1
            if (nameA > nameB)
                return 1
            return 0 //default return value (no sorting)
        });

    }
}

Working Fiddle

Hope this will help/guide you.