Component query to match context menu item in ExtJS 4.x controller

Question

I'm new to ExtJS and I have a TreePanel that I've added a context menu to. My TreePanel and context menu are defined like this:

Ext.define('UserMgmt.view.rightContainer', {
    extend: 'Ext.container.Container',
    alias: 'widget.rightcontainer',

    initComponent: function() {
        var me = this;

        // context menu for TreePanel
        var contextMenu = new Ext.menu.Menu({
            itemId: 'contextMenuForTreePanel',
            items: [
                {
                    text: 'Expand all',
                    itemId: 'expandAllNodes'
                },
                {
                    text: 'Collapse all',
                    itemId: 'collapseAllNodes'
                }
            ]
        });

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'treepanel',
                    itemId: 'myTreePanel',
                    columns: [
                        {
                            xtype: 'treecolumn',
                            dataIndex: 'name',
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'permission',
                        }
                    ],
                    listeners: {
                        itemcontextmenu : {
                            fn: function(view, record, item, index, event) {
                                console.log("Right-clicked on " + record.get('name'));
                                contextMenu.showAt(event.getXY());
                                event.stopEvent();
                            }
                        }
                    }
                }
            ]
        });

        me.callParent(arguments);
    }
});

This much is working as I expect it to. When I right click on a tree node, I see the context menu pop up with "Expand all" and "Collapse all" menu items. What I'm having trouble with is hooking up event handlers in my controller for the context menu items.

In my controller, I've been hooking up event handlers like this:

init: function() {
    this.control({
        'combobox#myComboBox': {
            select: this.onComboBoxSelect
        },
        'treepanel#myTreePanel': {
            itemclick: this.onTreePanelItemClick
        }
    });
}

These event handlers are working properly. Unfortunately, I can't seem to come up with a component query to match my context menu items so I can wire up a click event handler for them. I had thought it would be something like:

contextMenuForTreePanel#expandAllNodes

or

rightcontainer#expandAllNodes

Neither of these appear to be working properly however. Can anyone tell me what I'm doing wrong? Thanks!

Answer 1

The context menu is not a child item of the tree panel. Nevertheless, as you assign itemId to it you can get it with #contextMenuForTreePanel