Firing custom event from custom component and handle event in viewController

Question

I have created a custom component that extends from Ext.Panel. I have added a click listener to the custom component so that when it's clicked it will fire an event. I am instantiating the custom component in a view and I want to handle the event thats fired from the custom component in the viewController associated with that view.

However, when I fire the event, it's not bubbling up to the viewController. Is there a way to fire an event on the global scope? How do I go about handling an event in a viewController where the component that fires the event is instantiated in the view associated with the view controller?

My custom component looks somthing like so:

Ext.define('MyApp.ux.CustomComponent', {
  extend: 'Ext.Panel',

  xtype: 'custom-component'

  initComponent: function() {
    var me = this;
    me.callParent();

    me.addListener({
      'render': function(panel) {
        panel.body.on('click', function() {
          me.fireEvent('customEventName');
        });
      }
    });

  }
});

I am instantiating my custom component in a view like so:

Ext.define('MyApp.view.main.Main', {
  extend: 'Ext.container.Container',

  controller: 'main'

  items: [{
    xtype: 'custom-component'
  }]
});

And in my viewController (for the view that im instantiating my custom component in) I have the following listener:

customEventName: function () {
  console.log('I have been fired');
}

Normally, it has to work. But depending on how you create the component, there might be some exceptions. Can you share your view code ? — abeyaz, Jan 26 '16 at 19:26

score 3 · Accepted Answer · answered Jan 27 '16 at 21:27

View controllers listen for child item listeners, but not manually fired events. So, you need to use listener config for this like this e.g.

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',

    controller: 'main'

    items: [{
        xtype: 'custom-component',
        listeners: {
            customEventName: 'customHandlerNameInController'
        }
    }]
});

Now when you fire your custom event, your view controller method must work.

hwsw · Answer 2 · 2016-01-27T19:07:33.723

1

To fire events globally, you can use:

Ext.GlobalEvents.fireEvent('eventName', {args});

http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.GlobalEvents-method-fireEvent

Edit:

You can try a workaround:

Ext.GlobalEvents.fireEvent('customEventName');

In your controller:

listen: {
   global: {
     'customEventName': 'onClick'
   }
}

onClick: function(){
Ext.log('click happened');
}

edited Jan 27 '16 at 19:07

answered Jan 26 '16 at 18:37

hwsw

2,596
1
15
19

1

I have updated my question with some code. Thanks for the help. The `Ext.GlobalEvents` did not work for me. – country_dev Jan 27 '16 at 13:14
Your custom cmp extends Ext.Panel. have you tried to extend: Ext.panel.Panel? – hwsw Jan 27 '16 at 17:52
Btw, i cant find a click event here: http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.panel.Panel – hwsw Jan 27 '16 at 17:53
There isn't a built in click event for panel so I had to use a work around (illustrated in my code above). What I have above does listen for a click event on the custom component and fires the provided event name when clicked. The problem is that it's not making it to the viewController, which is where I want to handle the event. – country_dev Jan 27 '16 at 18:30
Ah, ok - you can try my edited answer, i guess this should work. – hwsw Jan 27 '16 at 19:08

Firing custom event from custom component and handle event in viewController

2 Answers2