How to fire event from menu item in view and catch it in controller in ExtJS?

Question

I have a requirement in ExtJS in which, on-click of menu item I have to fire an event from view and catch it in controller.

Following is my approach, but it's not working. While debugging, Control is coming till fire event but it's not catching in controller (not going to onResetAction function)

Please help me.

View:

new Ext.menu.Menu ({
                    width: 150,
                    height: 100,
                    itemId: 'menuItem123',
                    margin: '0 0 0 0',
                    items: menuOptions,
                    listeners:{
                        'click': function(menu, menuItem, e, eOpts)
                        {
                            if(menuItem.text === 'Inherit') {
                                 var viewConfig = {
                                            'viewName': 'Preference',
                                            'preferenceElement': preferenceElement,
                                            'scope': menu
                           };
                           menuItem.fireEvent('resetData', viewConfig);

                           }
                            this.hide();
                        }
                    }
                });

Controller:

init: function(application) {

    this.listen({

        component: {                
            'container[itemId=menuItem123] menuItem[text=Inherit]': {
                'resetData': this.onResetAction,
                'refreshLogoData': this.onRefresh
            }
        }
    }); 
},

onResetAction: function(viewConfig) {

  var me = this;

  /* some function*/

},

Answer 1

I guess your selector does not work, you can check it using Ext.ComponentQuery.query() or Ext.all().

If that's the issue, try changing the selector from:

'container[itemId=menuItem123] menuItem[text=Inherit]'

to:

'#menuItem123 menuItem[text=Inherit]'

Answer 2

try this

init: function(application) {
    var me = this;

    this.control({
        '#menuItem123 menuitem': { //menuitem all small
            resetData: me.onResetAction,
            refreshLogoData: me.onRefresh
        }
    }); 
},

onResetAction: function(viewConfig) {

  var me = this;

  /* some function*/

},

Here is a fiddle with a similar pattern: https://fiddle.sencha.com/#fiddle/13p7