PDA

View Full Version : How to relay events between children



Ex_Soft
9 Apr 2012, 4:44 AM
I want to relay events between items of container. I'm trying:


Ext.define("MainPanel", {
extend: "Ext.panel.Panel",

initComponent: function() {
this.border = 2;

this.buttons = [{
text: "MainPanelTestEvent",
scope: this,
handler: function() {
this.fireEvent("MainPanelTestEvent");
}
}, {
text: "InnerPanelTestEvent",
scope: this,
handler: function() {
this.fireEvent("InnerPanelTestEvent");
}
}];

this.callParent(arguments);

this.addListener("MainPanelTestEvent", this.onMainPanelTestEvent, this);
this.addListener("InnerPanelTestEvent", this.onInnerPanelTestEvent, this);

for(var i=0, len=this.items.items.length; i<len; ++i)
this.relayEvents(this.items.items[i], [
"MainPanelTestEvent",
"InnerPanelTestEvent"
]);
},

onMainPanelTestEvent: function() {
if(window.console && console.log)
console.log("MainPanel.onMainPanelTestEvent() (%s)", this.title);
},

onInnerPanelTestEvent: function() {
if(window.console && console.log)
console.log("MainPanel.onInnerPanelTestEvent() (%s)", this.title);
}
});

Ext.define("InnerPanel", {
extend: "Ext.panel.Panel",

initComponent: function() {
this.border = 2;

this.buttons = [{
text: "MainPanelTestEvent",
scope: this,
handler: function() {
this.fireEvent("MainPanelTestEvent");
}
}, {
text: "InnerPanelTestEvent",
scope: this,
handler: function() {
this.fireEvent("InnerPanelTestEvent");
}
}];

this.bubbleEvents = this.bubbleEvents.concat([
"MainPanelTestEvent",
"InnerPanelTestEvent"
]);

this.callParent(arguments);

this.addListener("MainPanelTestEvent", this.onMainPanelTestEvent, this);
this.addListener("InnerPanelTestEvent", this.onInnerPanelTestEvent, this);
},

onMainPanelTestEvent: function() {
if(window.console && console.log)
console.log("InnerPanel.onMainPanelTestEvent() (%s)", this.title);
},

onInnerPanelTestEvent: function() {
if(window.console && console.log)
console.log("InnerPanel.onInnerPanelTestEvent() (%s)", this.title);
}
});

Ext.onReady(function() {
Ext.QuickTips.init();

Ext.create("MainPanel",{
title: "MainPanel",
items: [
Ext.create("InnerPanel", {
title: "InnerPanel# 1"
}),
Ext.create("InnerPanel", {
title: "InnerPanel# 2"
})
],
renderTo: Ext.getBody()
});
});

But event from InnerPanel1/2 doesn't relaid to InnerPaner2/1 through MainPanel.

vietits
9 Apr 2012, 6:29 AM
object.relayEvents(source, [events]) just relays events from specified source object as if it is fired by object. However, it does not relay events to target objects. It is responsibility of target objects to listen to these events and to handle them.

Ex_Soft
9 Apr 2012, 6:38 AM
So, what should I do to exchange events between items of container? What is the best practice?

vietits
9 Apr 2012, 8:21 AM
FYI:


Ext.onReady(function(){
Ext.define("MainPanel", {
extend: "Ext.panel.Panel",


initComponent: function() {
this.border = 2;


this.buttons = [{
text: "MainPanelTestEvent",
scope: this,
handler: function() {
this.fireEvent("MainPanelTestEvent");
}
}];

this.callParent(arguments);


this.addListener("MainPanelTestEvent", this.onMainPanelTestEvent, this);
this.addListener("InnerPanelTestEvent1", this.onInnerPanelTestEvent, this); // capture event from child #1
this.addListener("InnerPanelTestEvent2", this.onInnerPanelTestEvent, this); // capture event from child #2
},


onMainPanelTestEvent: function() {
if(window.console && console.log)
console.log("MainPanel.onMainPanelTestEvent() (%s)", this.title);
},


onInnerPanelTestEvent: function() {
if(window.console && console.log)
console.log("MainPanel.onInnerPanelTestEvent() (%s)", this.title);
}
});


Ext.define("InnerPanel1", {
extend: "Ext.panel.Panel",


initComponent: function() {
this.border = 2;

this.buttons = [{
text: "InnerPanelTestEvent1",
scope: this,
handler: function() {
this.fireEvent("InnerPanelTestEvent1");
}
}];

this.bubbleEvents = this.bubbleEvents.concat([
"InnerPanelTestEvent1"
]);

this.callParent(arguments);


this.on({
scope: this,
render: function(){
this.ownerCt.on({
scope: this,
MainPanelTestEvent: this.onMainPanelTestEvent, // capture event from mainpanel
InnerPanelTestEvent2: this.onInnerPanelTestEvent // capture event from other sibbling
});
}
});
},


onMainPanelTestEvent: function() {
if(window.console && console.log)
console.log("InnerPanel.onMainPanelTestEvent() (%s)", this.title);
},


onInnerPanelTestEvent: function() {
if(window.console && console.log)
console.log("InnerPanel.onInnerPanelTestEvent() (%s)", this.title);
}
});

Ext.define("InnerPanel2", {
extend: "Ext.panel.Panel",


initComponent: function() {
this.border = 2;

this.buttons = [{
text: "InnerPanelTestEvent2",
scope: this,
handler: function() {
this.fireEvent("InnerPanelTestEvent2");
}
}];

this.bubbleEvents = this.bubbleEvents.concat([
"InnerPanelTestEvent2"
]);

this.callParent(arguments);


this.on({
scope: this,
render: function(){
this.ownerCt.on({
scope: this,
MainPanelTestEvent: this.onMainPanelTestEvent, // capture event from parent
InnerPanelTestEvent1: this.onInnerPanelTestEvent // capture event form other sibbling
});
}
});
},


onMainPanelTestEvent: function() {
if(window.console && console.log)
console.log("InnerPanel.onMainPanelTestEvent() (%s)", this.title);
},


onInnerPanelTestEvent: function() {
if(window.console && console.log)
console.log("InnerPanel.onInnerPanelTestEvent() (%s)", this.title);
}
});

Ext.create("MainPanel",{
title: "MainPanel",
items: [
Ext.create("InnerPanel1", { // create an instance of InnerPanel1
title: "InnerPanel# 1"
}),
Ext.create("InnerPanel2", { // create an instance of InnerPanel2
title: "InnerPanel# 2"
})
],
renderTo: Ext.getBody()
});
});

Ex_Soft
9 Apr 2012, 12:07 PM
this.on({
scope: this,
render: function(){
this.ownerCt.on({
...
});
}
});

THNX
But this looks good and works fine for one level of nesting. And what about n-levels of nesting?