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.

Please consider providing more information. There is no code example. How did you bind your data, etc? In extJS the data is stored like in normal objects, so you need to specify your question to that problem not to extjs in general. — Megajin, Aug 03 '18 at 12:30

score 1 · Accepted Answer · answered Aug 03 '18 at 12:59

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.

answered Aug 03 '18 at 12:59

Rohit Sharma

1,402
9
20

Thanks Rohit.. It helped but it is causing one severe issue with me. Once the grid column menus are sorted, the very next time if am trying to re position the grid column using drag and drop. It is giving Ext JS Script Error. For example in the above image I want to replace places "EMPLOYEE ID" and "EMPLOYEE NAME" with each other. While doing this I am getting Ext JS script error and terminating my application. Can you help me with this ? – ravi Aug 17 '18 at 08:10
https://fiddle.sencha.com/#view/editor&fiddle/2k4q This is your fiddle. I am trying to exchange the position of "USERNAME" with "NUMBER" column with drag and drop. P.S. I am using Mozilla Browser. – ravi Aug 17 '18 at 08:18

score 1 · Answer 2 · answered Jul 08 '21 at 14:12

Above solution is broken for complex grids and dynamic column groupings so then you also need to update the keys with menu items order so use below code if you encounter that its not working properly for you.

headermenucreate: function (grid, menu, headerCt, eOpts) {
                    //Fired immediately after the column header menu is created.
                    let columnItems = menu.down('[itemId=columnItem]'),
                        menuItems = columnItems.menu.items.items;
                    // Sorting by column's lowercase "text" in ascending order
                    menuItems.sort(function (item1, item2) {
                        let name1 = item1.text.toLowerCase(),
                            name2 = item2.text.toLowerCase()
                        if (name1 < name2) //sort string ascending
                            return -1
                        if (name1 > name2)
                            return 1
                        return 0 //default return value (no sorting)
                    });
                    // We need to update keys order as well otherwise it will have old 
                    // menu item keys order and grouping by field starts creating a problem.
                    columnItems.menu.items.keys = menuItems.map(function(item){
                        return item.id;
                    });
                },

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

2 Answers2