如何在 Ext Js 6.5.2 中对网格 header 列菜单中的 'Columns' 进行排序

Question

目前我正在使用 Ext JS 6.5.2.. 我在对网格列菜单项进行排序时遇到问题。

我想对列列表进行排序，但请记住我不想对列 header 进行排序。这张图片可能会给你清晰的视觉效果，我只想对菜单列表进行排序，但它不应该影响我的网格 header 顺序。仅对红色列表进行排序，而不对绿色列表进行排序。 Please refer this image.

*注意：我不需要任何基于数据的排序。

Answer 1

您可以使用 headermenucreate event of grid 来实现。

代码片段：

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

希望这会 help/guide 你。

Answer 2

以上解决方案不适用于复杂的网格和动态列分组，因此您还需要使用菜单项顺序更新键，因此如果您遇到它无法正常工作，请使用下面的代码。

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

如何在 Ext Js 6.5.2 中对网格 header 列菜单中的 'Columns' 进行排序

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

javascript

sorting

grid

extjs

extjs-grid