ExtJs bubble menu event

Question

I have my ExtJs menu defined as follows. I have two custom methods added to my menu item 'hookMethod' and 'handlerMethod'. 'hookMethod' is added based upon some condition. I bubble the click event for individual menu items to the root menu. Then checks if hook is defined then call 'hookMethod' else call the 'handlerMethod' directly. The problem that I am facing is that the click listener is called twice, once for menuitem and once for menu. Also, what is e argument. I was thinking it will be called only once for menu and I will have some way to retrieve the actual menu item being clicked in it.

{
    xtype: "menu",
    listeners: {
        click: function(item, e, eopts)
        {
            if(item.hookMethod) { 
                item.hookMethod(item.handlerMethod);
            }
                else {
               item.handlerMethod(this);
            }
         }
    },
    items: [{
        xtype: "menuitem",
        text: "Process Record",
        bubbleEvents: ['click'],
        hookMethod: function(actualMethod)
        {
            //do some pre-processing here and then call the actual handler
            actualMethod(args)
        },
        handlerMethod: function(args)
        {
            //Do actual processing
        },
    }]
}

Akatum Akatum · Accepted Answer · 2014-02-18T07:31:45

Ext.menu.Menu click( menu, item, e, eOpts ) event have four parameters.

First parameter is menu object itself.

Second item parameter is object of the menu item that was clicked. This parameter you can use for determine which item in menu was clicked.

ExtJs bubble menu event

1 Answers