Archive

Archive for the ‘ExtJS’ Category

Events and ExtJS

April 1st, 2009
21 comments

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