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.