Question

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

我想对列列表进行排序，但是请记住我不想对列标题进行排序。该图像可以使您清楚地看到我只想对菜单列表进行排序，但它不会影响我的网格标题顺序。仅对红色列表进行排序，而不对绿色进行排序。 Please refer this image.

*注意：我不需要根据数据进行任何排序。

Answer 1

您可以通过使用headermenucreate的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

希望这会帮助/指导您。

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中的网格标题列菜单中对“列”进行排序

2 个答案: