ExtJS 4網格標題中未顯示子菜單項

Question

我正在嘗試在網格標題中創建一個帶有一些子菜單的菜單，但現在顯示了子菜單項。 以下是我在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：

但是當我試圖顯示他們的子菜單時，我收到一個錯誤：

不知何故，菜單的parentMenu屬性undefined 。 有什么建議么？

Answer 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事件以顯示或隱藏所選列。