Home > ExtJS, WebDev > Events and ExtJS

Events and ExtJS

April 1st, 2009

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.
Events
MyTree (a TreePanel) is a sender that builds a simple tree with root and a couple nodes. Clicking on a node will fire a “nodeSelected” event along with the node name as an argument. The root node will fire the “rootSelected” event when it is clicked with no argments.
Here is MyTree code:
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

ExtJS, WebDev

  1. Teox
    September 8th, 2009 at 11:42 | #1

    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!

  2. Joshua Moore
    October 29th, 2009 at 10:48 | #2

    Thank you for this simple but effective example of ExtJS events!

  3. Cristian
    October 8th, 2010 at 08:55 | #3

    Nice…and usefull :)

  4. Annie
    November 18th, 2010 at 15:14 | #4

    Just helped me finally get the from and to on the relayEvent, “the glue”. Thanks!

  5. Javier
    January 6th, 2011 at 14:39 | #5

    Mi bueno. Gracias, he logrado entender como trabajar con varios Ext.ns.

    Saludos desde Buenos Aires.

  6. Pedro Franice
    June 22nd, 2011 at 04:02 | #6

    Great tutorial… was like a gloaming for me!

  7. June 27th, 2014 at 05:50 | #7

    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

  8. December 8th, 2015 at 23:03 | #8

    Some diets propose reducing particular foods,
    including fish, meat, rice or milk products.

  9. December 12th, 2015 at 11:40 | #9

    Many people including myself, are finding that the low carbohydrate high fat diet has assisted to reduce levels and blood glucose levels.

  10. September 8th, 2017 at 16:23 | #10
  11. November 17th, 2021 at 21:10 | #11

    Alison Krauss And The Cox Family I Know Who Holds Tomorrow https://huffingtonpost.society-of-consultant-philosophers.org.uk/28.html Milf Funkaria EP

  12. September 1st, 2023 at 16:31 | #12

    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.

  13. January 5th, 2024 at 10:18 | #13

    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.

  14. February 3rd, 2024 at 09:52 | #14

    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.

  1. December 7th, 2010 at 15:32 | #1
  2. May 6th, 2011 at 11:47 | #2