PDA

View Full Version : Nested Custom Events & Listeners



chazri
2 Dec 2010, 8:42 AM
Hey awesome forum people.

I'm running into a problem that I hope you can help me resolve. Here's what's going on.

I have three custom widgets that each extend Ext.Panel. The first custom widget is a parent widget. The second widget is a header widget that appears inside the parent. The third custom widget is a child widget, one of many components that are added to the header widget that make-up the entire header.

Some of the code in the parent widget looks like this:


ParentPanel=Ext.extend(Ext.Panel, {
...
items:[
{
xtype:'headerpanel',
...
listeners:{
backclicked:function(o){
alert('Back button in header was clicked !!');
}
}
}
]
...
});
Some of the code in the header widget looks like this:


HeaderPanel=Ext.extend(Ext.Panel, {
...
constructor:function(config){
this.addEvents('backclicked');
HeaderPanel.superclass.initComponent.apply(this,config);
},
items:[
{
xtype:'childpanel',
...
listeners:{
backbuttonclicked:function(o){
this.ownerCt.fireEvent('backclicked', o);
}
}
}
]
...
});
Some of the code in the child widget looks like this:


ChildPanel=Ext.extend(Ext.Panel, {
...
constructor:function(config){
this.addEvents('backbuttonclicked');
ChildPanel.superclass.initComponent.apply(this,config);
},
items:[
{
xtype:'panel',
...,
items:[
{
xtype:'button',
...,
handler:function(o){
this.ownerCt.ownerCt.fireEvent('backbuttonclicked',o);
}
}
]
}
]
...
});
When I click the button in the child widget, the header widget successfully hears the 'backbuttonclicked' event fired by the child. When the header widget then fires the 'backclicked' event, the parent widget is not hearing it.

Why can't the parent widget hear the 'backclicked' event fired by the header widget?

Thanks in advance!
John