ExtJS 4 网格标题中未显示子菜单项答案

【问题标题】：Submenu items are not shown in ExtJS 4 grid headerExtJS 4 网格标题中未显示子菜单项
【发布时间】：2013-03-18 02:05:40
【问题描述】：

我正在尝试在网格标题中创建一个包含一些子菜单的菜单，但现在显示了子菜单项。这是我在Ext.grid.header.Container 中覆盖getColumnMenu() 的方法：

Ext.override(Ext.grid.header.Container, {
    /**
     * Returns an array of menu CheckItems corresponding to all immediate children of the passed Container which have been configured as hideable.
     */
    getColumnMenu: function (headerContainer) {
        // debugger
        var xmenu = new Ext.menu.Menu({
            style: {
                overflow: 'visible'
            },
            items: [{
                text: 'Category 1',
                menu: [{
                    text: 'Item 1.1',
                    checked: true,
                    checkHandler: this.onColumnCheckChange
                }, {
                    text: 'Item 1.2',
                    checked: false,
                    checkHandler: this.onColumnCheckChange
                }]
            }, {
                text: 'Category 2',
                menu: [{
                    text: 'Item 2.1',
                    checked: true,
                    checkHandler: this.onColumnCheckChange
                }, {
                    text: 'Item 2.1',
                    checked: false,
                    checkHandler: this.onColumnCheckChange
                }]
            }]
        });

        var test = [];
        xmenu.items.each(function (item) {
            test.push(item);
        });
        return test;

    }
});

菜单类别 1 和类别 2 显示：

但是当我尝试显示他们的子菜单时，我收到一个错误：

不知何故是菜单undefined 的parentMenu 属性。有什么建议吗？

【问题讨论】：

我在尝试查看子菜单（位于工具栏的菜单内）时也遇到同样的错误。我尝试组织菜单和菜单项的创建，但没有帮助。

标签： gridview extjs extjs4 submenu

【解决方案1】：

老实说，我不太确定您的代码为什么不起作用。我只是试图组织菜单和菜单项的创建，它奏效了。我使用了以下代码

getColumnMenu: function(headerContainer) {
    var menuItems = [];

        /* CATEGORY 1 */
        var itemsOneMenu = Ext.create('Ext.menu.Menu', {
            items: [{
                text: 'Item 1.1',
                checked: true,
                checkHandler: this.onColumnCheckChange
            },{
                text: 'Item 1.2',
                checked: false,
                checkHandler: this.onColumnCheckChange
            }]
        });

         categoryOneMenuItem = Ext.create('Ext.menu.Item', {
            text: 'Category 1',
            hideOnClick: false,
            menu: itemsOneMenu
        });

        /* CATEGORY 2 */
        var itemsTwoMenu = Ext.create('Ext.menu.Menu', {
            items: [{
                text: 'Item 2.1',
                checked: true,
                checkHandler: this.onColumnCheckChange
            },{
                text: 'Item 2.1',
                checked: false,
                checkHandler: this.onColumnCheckChange
            }]
        });

        categoryTwoMenuItem = Ext.create('Ext.menu.Item', {
            text: 'Category 2',
            hideOnClick: false,
            menu: itemsTwoMenu
        });

    menuItems.push(categoryOneMenuItem,categoryTwoMenuItem);
    return menuItems;
}

在这里您可以找到一个运行示例http://jsfiddle.net/alexrom7/xheHn/。唯一的观察是 EXT 将继续侦听 CheckItem checkchange 事件 以显示或隐藏选定的列。

【讨论】：