PDA

View Full Version : Custom event propagation



leorossi
2 Jun 2011, 10:09 PM
Hello everybody,
I tried to look for an answer to my question but no luck so far..

well... I have a formpanel with a button. I would like to fire a custom event on button click so that the Ext.window container would catch it eventually.

My code snap:



this.Layout = new Ext.FormPanel({blablablab});
this.Layout.addEvents('customEvent');
var win = new Ext.Window({
height: 400,
modal: true,
draggable: false,
resizable: false,
...
},
listeners: {
customEvent: function() {
alert("got it");
}
}
});
win.show();

Then when I click the button I call

fireEvent('customEvent', this);
Obviously the Form is correctly displayed in the window, in my application (Actually the window declaration is on another file, cause it will be a popup window).

This code won't work, the alert is not shown so I guess the event is not propagated to the parent window.

I also tried to call from the FormPanel the method getParentByType('window'), but it returns null, is there any way to access the parent Ext.Window from the FormPanel ?

Thanks in advance for your help!

drian
3 Jun 2011, 8:26 AM
try to add this piece of code in the configuration:



initComponent : function() {

this.addEvents({
customEvent: true
});

this.superclass.initComponent.call(this);
},

skirtle
3 Jun 2011, 7:14 PM
You're correct. events do not propagate up to parent containers. You can use relayEvents() to have one Observable proxy through the events from another Observable. Here's an example that also uses findParentByType() (there's no such method as getParentByType()):


new Ext.Window({
height: 300,
layout: 'fit',
title: 'Window',
width: 300,
items: new Ext.form.FormPanel({
border: false,
title: 'Form',
items: [
new Ext.Button({
text: 'Fire customEvent',
handler: function() {
this.fireEvent('customEvent');
}
}),
new Ext.Button({
text: 'Close',
handler: function() {
this.findParentByType('window').close();
}
})
]
}),
listeners: {
afterrender: function(win) {
var form = win.get(0);
var button = form.get(0);

win.relayEvents(button, ['customEvent']);
},

customEvent: function() {
Ext.Msg.alert('Event', 'customEvent fired on window');
}
}
}).show();

skirtle
5 Jun 2011, 9:54 PM
On second thoughts, rather than using relayEvents() you could just use enableBubble() or the config option bubbleEvents. Check out the docs for more info. Revised example without the afterrender listener:


new Ext.Window({
height: 300,
layout: 'fit',
title: 'Window',
width: 300,
items: new Ext.form.FormPanel({
border: false,
title: 'Form',
items: [
new Ext.Button({
bubbleEvents: ['customEvent'],
text: 'Fire customEvent',
handler: function() {
this.fireEvent('customEvent');
}
}),
new Ext.Button({
text: 'Close',
handler: function() {
this.findParentByType('window').close();
}
})
]
}),
listeners: {
customEvent: function() {
Ext.Msg.alert('Event', 'customEvent fired on window');
}
}
}).show();