Deprecated: Assigning the return value of new by reference is deprecated in /homepages/28/d156202272/htdocs/doug/blog/wp-settings.php on line 520

Deprecated: Assigning the return value of new by reference is deprecated in /homepages/28/d156202272/htdocs/doug/blog/wp-settings.php on line 535

Deprecated: Assigning the return value of new by reference is deprecated in /homepages/28/d156202272/htdocs/doug/blog/wp-settings.php on line 542

Deprecated: Assigning the return value of new by reference is deprecated in /homepages/28/d156202272/htdocs/doug/blog/wp-settings.php on line 578

Deprecated: Function set_magic_quotes_runtime() is deprecated in /homepages/28/d156202272/htdocs/doug/blog/wp-settings.php on line 18

Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/classes.php on line 1199

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/classes.php on line 1199

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/classes.php on line 1199

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/classes.php on line 1199

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/classes.php on line 1244

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/classes.php on line 1391

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/classes.php on line 1391

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/classes.php on line 1391

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/classes.php on line 1391

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/classes.php on line 1442

Strict Standards: Redefining already defined constructor for class wpdb in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/wp-db.php on line 306

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/cache.php on line 431

Strict Standards: Declaration of Walker_Comment::start_lvl() should be compatible with Walker::start_lvl(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/comment-template.php on line 1266

Strict Standards: Declaration of Walker_Comment::end_lvl() should be compatible with Walker::end_lvl(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/comment-template.php on line 1266

Strict Standards: Declaration of Walker_Comment::start_el() should be compatible with Walker::start_el(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/comment-template.php on line 1266

Strict Standards: Declaration of Walker_Comment::end_el() should be compatible with Walker::end_el(&$output) in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/comment-template.php on line 1266

Strict Standards: Redefining already defined constructor for class WP_Dependencies in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/class.wp-dependencies.php on line 31

Strict Standards: Redefining already defined constructor for class WP_Http in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/http.php on line 61
Doug’s Blog » ExtJS

Archive

Archive for the ‘ExtJS’ Category

Strict Standards: mktime(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 41

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 50

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 52

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 54

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 55

Strict Standards: mktime(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 41

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 50

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 52

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 54

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 55

Events and ExtJS


Strict Standards: mktime(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 41

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 50

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 52

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 54

Strict Standards: date(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EDT/-4.0/DST' instead in /homepages/28/d156202272/htdocs/doug/blog/wp-includes/functions.php on line 55
April 1st, 2009

Strict Standards: Only variables should be passed by reference in /homepages/28/d156202272/htdocs/doug/blog/wp-content/themes/inove/functions.php on line 353

Strict Standards: Only variables should be passed by reference in /homepages/28/d156202272/htdocs/doug/blog/wp-content/themes/inove/functions.php on line 353
11 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