PDA

View Full Version : Listen to event fired by different component



forumuser1080
14 Mar 2011, 12:56 PM
Can you listen to an event that is fired by another component.

I.E. I have a tree panel and when there is a 'click' on a node in the tree I need to update multiple components. Disable/Enable menu components, update forms, etc.

I currently have a method in my tree panel that handles the click event, but it has to go out and find all of the other components and update them accordingly.



onClick: function(){
var cmp = Ext.getCmp('cmp1');
// do a bunch of stuff with cmp1

cmp = Ext.getCmp('cmp2');
// do a bunch of stuff with cmp2

cmp = Ext.getCmp('cmp3');
// do a bunch of stuff with cmp3
}


Would be nice if I could just listen for that 'click' event in multiple other components.

cmp1.on('click', doCmp1Stuff, scope);
cmp2.on('click', doCmp2Stuff, scope);
cmp3.on('click', doCmp2Stuff, scope);

Problem is that is not really listening to the TreePanels click event.

steffenk
14 Mar 2011, 2:52 PM
you can do this anywhere, also multiple times:


mycomponent.on('eventname', function() {
console.log('eventname thrown', arguments);
});

forumuser1080
14 Mar 2011, 3:59 PM
Not sure I am doing this right, still a little confused, thanks for the help



MyPanel = Ext.extend(Ext.Panel, {
constructor: function(){

// Can I add an onClick method this way
this.menu = new Ext.menu.Menu({
onClick: function() {
console.log('tree panel node was clicked and menu was listening');
}
});
this.form = new Ext.form.FormPanel({
onClick: function() {
console.log('tree panel node was clicked and form was listening');
}
});

this.treePanel = new Ext.tree.TreePanel(...);

this.treePanel.on('click', this.menu.onClick, this.menu); // call with menu scope
this.treePanel.on('click', this.form.onClick, this.form); // call with form scope

// Call parent (required)
MyComponent.superclass.constructor.apply(this, arguments);
}

initComponent: function() {
Ext.apply(this, {
items: [
this.treePanel,
this.formPanel
]
});

// Call parent (required)
MyComponent.superclass.initComponent.apply(this, arguments);
}
});

steffenk
14 Mar 2011, 4:22 PM
If you reread your code you might see that this can't work. You are creating new and empty objects with click handler ;)

First: use your namespace


Ext.ns('MyApp')

MyApp.mainMenu = new Ext.menu.Menu({....});
MyApp.TreePanel = new Ext.tree.TreePanel({..});
etc.

then - what do you want with those clicks? A menu has menuitems with click, a treepanel has nodes with click. The vents you want to use make no sense.

forumuser1080
14 Mar 2011, 5:06 PM
hmm, I seem to be more confused than when I started.

I want to listen for the TreePanels click event from different components: i.e. when a node is clicked I may want to disable/enable a menu item. I will also want to send some info to a form.



Ext.ns(MyApp);

MyApp.FormPanel = new Ext.form.FormPanel({
onClick: function() {
// I want this method to be called when a Tree Node is clicked
}
});
MyApp.Menu = new Ext.menu.Menu({
onClick: function() {
// I want this method to be called when a Tree Node is clicked
}
});

MyApp.TreePanel = new Ext.tree.TreePanel();

MyApp.TreePanel.on('click', MyApp.Form.onClick, MyApp.Form);
MyApp.TreePanel.on('click', MyApp.Menu.onClick, MyApp.Form);
});


Is that a little closer, i.e. when a tree node is clicked will the onClick method for each item be called?

Thanks for the help

haiyupeter
14 Mar 2011, 5:18 PM
Maybe you can see the treepanel's API like this:

click : ( Node node, Ext.EventObject e )
Fires when a node is clicked
Listeners will be called with the following arguments:
node : Node
The node
e : Ext.EventObject
The event object

OK,let's try:


Ext.ns(MyApp);

MyApp.FormPanel = new Ext.form.FormPanel({
onClick: function() {
// I want this method to be called when a Tree Node is clicked
}
});
MyApp.Menu = new Ext.menu.Menu({
onClick: function() {
// I want this method to be called when a Tree Node is clicked
}
});

MyApp.TreePanel = new Ext.tree.TreePanel();

function treePanelClick(node, event) {
MyApp.FormPane.fireEvent('click');
MyApp.Menu.fireEvent('click');
}

MyApp.TreePanel.on('click', treePanelClick);

});

forumuser1080
14 Mar 2011, 7:44 PM
That will only work if I create click events for my form panel and my menu right? IE need to create a 'treeclick' event for each of those?

I am worried that I am not designing this right. For each new component that I add it that needs to know about my tree being clicked I will have to add a new 'treeclick' event to, and I will have to fire that event in the treePanelClick() function.

I would like to get away from the TreePanel knowing about all of the components that need to be updated when a node in the tree is clicked. ie, when I do this in the treePanelClick method then the TreePanel knows about all the components that need to be updated (seems bad).



MyApp.FormPanel.fireEvent('treeclick');
MyApp.Menu.fireEvent('treeclick');
...
MyApp.Panel24.fireEvent(treeclick');


I would like to somehow register all of those other components with the click event that the TreePanel fires. I.E. TreePanel knows it fires an event and that is all it cares about. Can other components that may care about that event listen??????????

That way when I add a new component in three months I do not need to modify my TreePanel code. I can just create the new component and have it listen for the TreePanels click event.

Barzoy
15 Mar 2011, 12:04 AM
Saki is on vacation, so I'll post it instead of him :P

http://examples.extjs.eu/?ex=simplebus

forumuser1080
15 Mar 2011, 9:24 AM
Yes perfect that is exactly what I am looking for!!!!! Thanks so much