Extjs 4 - Button menu item click

Question

I have a menu for a button, which in turn is set as the tools for a container. I want to handle click on the menu items and not on the button itself. How do I implement it?

Answer 1

Example, should be straight forward:

Ext.onReady(function() {

    new Ext.panel.Panel({
        renderTo: document.body,
        title: 'A Panel',
        width: 200,
        height: 200,
        tools: [{
            xtype: 'button',
            text: 'Foo',
            menu: {
                items: [{
                    text: 'Item 1',
                    handler: function() {
                        console.log('Item 1');
                    }
                }, {
                    text: 'Item 2',
                    handler: function() {
                        console.log('Item 2');
                    }
                }]
            }
        }]
    });
});

Answer 2

You can handle all items in a listener through a code below. Pass a menu config to a button and add a click listener to the menu.

{
    xtype: 'button',
    text: 'Button',
    menu: {
        xtype: 'menu',
        items: [
            { text: 'foo' },
            { text: 'bar' },
            { text: 'hoge' }
        ],
        listeners: {
            click: function( menu, item, e, eOpts ) {
                console.log(item.text);
            }
        }
    }
}