DOM-like event bubbling on [component].ownerCt

[Tvaland]

In the html DOM, an event bubbles from the element the event originated on, up to the top of the DOM or vice versa, depending on the browser.

Is this something you're considering/decided against in Ext, having events bubbling from a component, up all [component].ownerCt. When a component is added to another, all events in the new component is added to the "stack" of ownerCts.

For me at least, this would make it easier to make more flexible/pluggable modules.

[SamuraiJack1]

Support this, I think its intuitively excepted.

[dj]

have a look at relayEvents: http://extjs.com/deploy/dev/docs/?class=Ext.util.Observable&member=relayEvents
It's no event-bubbling but I don't think that a default event-bubbling would make much sense.

[bork]

I'd also like to see this.

Just today, I've been frustrated trying to do something like this:

- Viewport with border layout (west/center) (not that this matters)
- Center panel contains a window that contains a grid with a tbar.
- Grid's tbar contains a button for "Add Record"
- The button's click handler produces another window with a form.

Ideally, I don't want to tell my grid about the center panel a few levels up. I'd like the button click to emit an event that bubbles up to the center Panel, which consumes the event and creates the form-window.

When the form gets saved, another event should fire, again getting caught by the center panel. The handler calls the grid's reload();

Am I missing some obvious way to do this (that doesn't require the grid to know about the panel, nor the form about the grid?)

[dj]

Hi Bork,

problem with event bubbling is, that the event handler don't know from which component the event came from. Ext events don't have a getTarget() method or so to get the component which originated the event. Also it would be quite tedious to check the originating component in each and every event handler.

This is how I would tackle your problem: Sub-class grid with a pre-configured (http://extjs.com/learn/Tutorial:Writing_a_Big_Application_in_Ext#Pre-configured_classes) class that adds a new event "addrecord". This event gets fired when the button is pressed. Some component up in the chain or your application logic listens to this event on the grid and if it gets fired this component creates and shows the form - also a pre-configured class with a new event "save" that the parent component listens to and the handler calls the reload() of the grid.

Basically: Build components that are as self-contained as possible but logic that involves both, grid and form, has to be handled by a component that knows them both.

PS: others have suggested PageBus (http://www.tibco.com/devnet/pagebus/default.jsp) in this forum for decoupling components - I for myself didn't found the need to use it but maybe it fits your needs and preferences.

[SamuraiJack1]

Again, supporting this idea.

Ext have an obvious lack of broadcasting capabilities for components to communicate between each other.

Another example is
- i have a popup login window in my app
- i have several components which needs to be redrawn after users login.

Seems very natural for login window to fire 'loggedin' event or smth and others components to handle it.
It may be not strictly bubbling idea, near to broadcasting.
For now it can be solved with "fireing" and "handling" events on 1 central component which assumes that all your plugins should know about it.
Also subclassing for such basic tasks is not very practical.

Would be great to see this capabilities in Ext 3.0

[hendricd]

Bubbling seems a bit narrow for what the OP is talking about. What about downstream components? Is it really desirable to propogate Application level events to all components?

A pattern like this permits any Component to react to App-level events when subscribed to:




myAppClass = function(config){
Ext.apply(this, config || {});
this.addEvents(
'login',
'logout',
'sessiontimeout'
);
};

Ext.extend(myAppClass, Ext.util.Observable, {
userId : null,
raiseLogin : function(userId){ this.fireEvent('login',this,this.userId); },
raiseLogout: function(userId){ this.fireEvent('logout',this,this.userId); },
raiseTimeout: function(userId){ this.fireEvent('sessiontimeout',this,this.userId); },
init : function() { ........... }
});
myApp = new myAppClass();
Ext.onReady(myApp.init, myApp);

Then, any future component that cares about such events need only subscribe to these App-level events:



something.add ({
xtype: 'form',
handleLogin : function(App, user){},
handleLogout : function(App,user){this.getForm().disable(); },
handleTimeout : function(App,user){},
listeners:{
render: function(formPanel){
myApp.on({
login : this.handleLogin,
logout: this.handleLogout,
sessiontimeout : this.handleTimeout
scope : formPanel
});

}
},.......
});
Then, later:


myApp.raiseLogout();

[SamuraiJack1]

Thats it - 1 central component caring about events. Very clean implementation, thanks )

The question is - should it become ext built-in? (so anyone can write plugins based on such pattern). Though, it can be implemented as standalone extension and others extension may require it like pre-requisite )

[hendricd]

IMHO: No.

How would the framework know what App-specific events are relevant to your needs? What would it call them?

[SamuraiJack1]

Well, framework should not know about App-specific events - it should grant the ability
to use them if required. Think such pattern is very natural way of coding

[SamuraiJack1]

Well, small extension for such event handling pattern:
http://extjs.com/forum/showthread.php?t=37422