Events and ExtJS
I whipped up a small demo app to demonstrate how events work in an ExtJS app. The demo is simple. There is a tree panel on the left and a form panel on the right. When the user clicks a node in the tree, the form is updated with the name of the node.
Events are useful because the sender and receiver objects do not need to know about each other. Just what events they will send and respond to.
To use events, there are three things you’ll need:
- Events - Events are fired when something happens, such as when a user clicks a node in the tree. Events are usually accompanied by some args for the listener. The object that sends an event can be called a sender.
- Listeners - Listens for events and does something, such as update a form field or reload a data store. The object that listens for an event can be called a receiver.
- relayEvents() - This is the “glue” that tell which objects will receive which events.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | // Tree Panel MyTree = Ext.extend(Ext.tree.TreePanel, { region: 'west', width: 150, viewConfig: { forceFit: true }, initComponent: function() { MyTree.superclass.initComponent.call(this); var root = new Ext.tree.TreeNode({ allowDrop: false, text: "my root", expanded: true }); root.on('click', function() { this.fireEvent('rootSelected'); }); this.setRootNode(root); var anode = new Ext.tree.TreeNode({ allowDrop: false, text: "my node", }); anode.on('click', function() { this.fireEvent('nodeSelected', anode.text); }); root.appendChild(anode); var bnode = new Ext.tree.TreeNode({ allowDrop: false, text: "another node", }); bnode.on('click', function() { this.fireEvent('nodeSelected', bnode.text); }); root.appendChild(bnode); } }); |
Listeners
MyForm (a FormPanel) is a receiver that listens for events that have fired. Listeners are created by using the on() method or the addListener() method; they both do the same thing. These listeners should also expect the arguments that accompany fired events, if needed.
MyForm has two listeners, that correspond to the events fired by MyTree: “nodeSelected” and “rootSelected”. nodeSelected expects an argument, the node’s name, which is displayed in the form field. rootSelected does not need an argument; it just clears the form field.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | // Form Panel MyForm = Ext.extend(Ext.form.FormPanel, { region: 'center', title: "Sample Form", layout: 'fit', doSomething: function(a) { this.getForm().findField('node').setValue(a); }, doSomethingElse: function() { this.getForm().findField('node').setValue(''); }, initComponent: function() { Ext.apply(this, { items: { xtype: 'fieldset', labelPad: 10, defaultType: 'textfield', labelAlign: 'right', items: [ { xtype: 'field', id: 'node', name: 'node', fieldLabel: 'Selected Node', labelSeparator: '', width: 250, } ] } }); MyForm.superclass.initComponent.call(this); // Add a listener for nodeSelected event this.on('nodeSelected', function(a, b) { // call my method when nodeSelected event is fired this.doSomething(a) }); // Add a listener for rootSelected event this.on('rootSelected', function() { // call my method when rootSelected event is fired this.doSomethingElse() }); } }); |
relayEvents()
relayEvents() is the glue between the event sender and event receiver. It makes the receiver aware of the sender.
- Create MyTree and MyForm panels.
1 2 3 | // Make panels var tree = new MyTree(); var form = new MyForm(); |
- Tell MyForm to listen for events from MyTree
1 2 3 | // Tell form to watch for nodeSelected and rootSelected from tree // THIS IS THE GLUE! form.relayEvents(tree, ['nodeSelected', 'rootSelected']); |
- Layout MyTree and MyForm
1 2 3 4 5 6 7 8 9 | // Layout on screen var viewport = new Ext.Viewport({ layout:'border', items: [ form, tree ], }); |
And that’s the most basic useful demonstration of using events with ExtJS.
Links
Great tutorial, thanks ! I’m trying to modify the example to make it work with a dynamic tree, using selModel. The event get’s fired, but the form field do not get the update Any advices ? Thanks!
Thank you for this simple but effective example of ExtJS events!
Nice…and usefull
Just helped me finally get the from and to on the relayEvent, “the glue”. Thanks!
Mi bueno. Gracias, he logrado entender como trabajar con varios Ext.ns.
Saludos desde Buenos Aires.
Great tutorial… was like a gloaming for me!
I have to tell you that it’s hard to find your articles in google,
i found this one on 11 spot, you should build some quality backlinks
in order to rank your page, i know how to help you,
just type in google - k2 seo tips and tricks
Some diets propose reducing particular foods,
including fish, meat, rice or milk products.
Many people including myself, are finding that the low carbohydrate high fat diet has assisted to reduce levels and blood glucose levels.
jEKnbx http://www.FyLitCl7Pf7ojQdDUOLQOuaxTXbj5iNG.com
Alison Krauss And The Cox Family I Know Who Holds Tomorrow https://huffingtonpost.society-of-consultant-philosophers.org.uk/28.html Milf Funkaria EP
Thanks for another informative web site. The place else could I get that kind of information written in such a perfect
way? I have a challenge that I am simply now working on, and I’ve been at the look out for such info.
EnchagPT Blog to miejsce, gdzie można znaleźć
interesujące artykuły i informacje na temat technologii sztucznej inteligencji.
Jest to blog dedykowany wszystkim entuzjastom sztucznej inteligencji, którzy pragną zgłębiać swoją wiedzę na temat tego fascynującego tematu.
Thank you for every other informative site. Where else could I get that
type of information written in such a perfect method? I have a mission that I am
just now operating on, and I’ve been at
the glance out for such info.
wonderful put up, very informative. I’m wondering
why the opposite specialists of this sector don’t realize this.
You must continue your writing. I’m sure, you’ve a huge readers’ base already!
What’s up, I want to subscribe for this website to get most recent updates, thus where can i do it please help.
What’s up colleagues, its enormous paragraph on the topic of educationand fully
defined, keep it up all the time.
First of all I want to say great blog! I had a quick question that I’d
like to ask if you don’t mind. I was interested to find out how you center yourself and clear
your thoughts prior to writing. I’ve had trouble clearing
my mind in getting my ideas out there. I truly do take
pleasure in writing but it just seems like the first 10 to 15 minutes tend
to be lost just trying to figure out how to begin. Any ideas or tips?
Thank you!