A Log on JavaScript

I will usually try to post a major and well documented article on this blog every week. But during the week, I will also have smaller tips, just a few lines short, about small things/improvements that can make your life better using JavaScript and ExtJS.

Here is the first one:

Use the ref config option in ExtJS

var win = new Ext.Window({
    layout: 'fit',
    width: 300,
    height: 200,
    title: 'my window',
    items: [{
            ref: 'panel',
            xtype: 'panel', layout: 'form',
            frame: true, defaults: {xtype: 'textfield'},
            items: [
                {ref: '../nameField', fieldLabel: 'Name'},
                {ref: 'age', fieldLabel: 'Age'}
            ]
    }]
});

win.show();
//so now, with the above ref options, you can do:
win.nameField.setValue('name here');
win.panel.age.setValue(20);

Notice in the example above that setting ref age config puts a reference “age” in the panel containing the text field, while puting a ref ../nameField sets a “nameField” reference on the component one more level up, that is, the containing window. In this way, you can navigate many levels, each “/” navigating one more level upwards.
In this next example, I introduce another level of nesting, by artificially adding another panel, in order to illustrate the navigation with multiple slashes.

var win = new Ext.Window({
    layout: 'fit',
    width: 300,
    height: 200,
    title: 'my window',
    items: [{
            ref: 'panel',
            xtype: 'panel', layout: 'form',
            frame: true, defaults: {xtype: 'textfield'},
            items: [

                {
                     xtype: 'panel', fieldLabel: 'Name', layout: 'fit',
                     items: [{xtype: 'textfield', ref: '//nameField'}]
                     //notice above, two slashes, which puts
                     //nameField reference on the containing window (two levels)
                },
                {ref: 'age', fieldLabel: 'Age'}
            ]
    }]
});

win.show();
win.nameField.setValue('name here');
win.panel.age.setValue(20);

Please see Ext.Component “ref” reference from the Ext API.