ExtJS 4 MVC Architecture and Event Bubbling

[steve.brownlee]

I feel like I'm missing something so obvious, but I can't see it. Basically, I'm firing an event in a controller and I want the application to be able to listen to that event.

In the controller's init() I'm establishing an event

this.addEvents('networkselected');
this.enableBubble('networkselected');

Then when someone selects a network, I fire the event

this.fireEvent('networkselected');

How do I get my application to listen to this event. When I add the following code to my application's launch method, the event isn't handled.

launch: function() {
   this.addManagedListener(this, 
	'networkselected',
	function(){
		alert('networkselected handled');
   });
}

[iesdeveloper]

You can just fire the event in the app object itself from inside the controller:

this.application.fireEvent('networkselected'); 

Then in app object or in any other controllers:

init : function() {
    this.application.addListener({
        'networkselected' : this.onNetworkSelectedEvent,
    });
} 

I've been using this technique to send application-level event messages between controllers to reduce the coupling and it works pretty well so far.

[steve.brownlee]

This works great. It even allows me to bubble the event at the application level and let another object outside of the Ext application scope listen to it. Thanks so much!!

[iesdeveloper]

No problem.

The basic idea comes from this thread, where the OP goes a step further and creates a global app variable so you can fire the events from anywhere, not just controllers:

http://www.sencha.com/forum/showthread.php?133931-Feedback-on-Application-Event-Pattern

[steve.brownlee]

That's great, because that's what I ended up doing. I created a application.eventBus object that everything can fire to/listen from.

[Dipish]

Here's a related question: how do I prevent an event from bubbling? Kind of like e.stopPropagation() for DOM events. This is a VERY needed feature.