Submenu items are not shown in ExtJS 4 grid header

Question

I'm trying to create a menu with some submenus in the grid header, but the submenu items are now shown. Here is how I override getColumnMenu() in Ext.grid.header.Container:

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;

    }
});

The Menus Category 1 and Category 2 are shown:

but when I try to show their submenus, I receive an error:

Somehow is the parentMenu property of the menus undefined. Any suggestions?

Answer 1

To be honest, I'm not quite sure why your code didn't work. I just tried to organize the creation of the menus and menuitems and it worked. I used the following code

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

Here you can find a running example http://jsfiddle.net/alexrom7/xheHn/. The only observation is that EXT will keep listening to the CheckItem checkchange event to show or hide the selected column.