Home > Uncategorized > Using ref config option in Ext JS 3.0

Using ref config option in Ext JS 3.0

In Ext JS 2.x if you needed to get a reference to a Component which was nested deep inside a Container and you had a reference only to this Container, you could either assign that Component a unique id and use it with Ext.getCmp() or call a particular method of the Container and, if necessary, methods of other nested containers depending where the Component is in that hierarchy. Ext JS 3.0 makes it a little easier with the new itemId config (see my previous post).

In addition to itemId another new configuration option is introduced in Ext JS 3.0 which is supposed to completely eliminate problems like the one described above. The name of this config is ref.

ref is a path specification, relative to the Component’s container (ownerCt) specifying into which ancestor Container to place a named reference to this Component. The ancestor axis can be traversed by using ‘/’ characters in the path. For example, to put a reference to a Toolbar Button into the Panel which owns the Toolbar:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    }],
    listeners: {
        afteredit: function() {
            // The GridPanel has the reference to the save button
            myGrid.saveButton.enable();
        }
    }
});

In the code above, if the ref had been 'saveButton' the reference would have been placed into the Toolbar. Each ‘/’ in the ref moves up one level from the Component’s ownerCt.

Think about places where you could benefit from this config. It’s a small thing that has huge impact.

Advertisements
Categories: Uncategorized
  1. crysfel
    May 19, 2009 at 10:47 am

    thanks dude!! this is really good 😀

  2. gfender
    May 19, 2009 at 12:38 pm

    this is not related to the post but another topic for you is possibly the change to HttpProxy in Ext 3.0. It looks like they’ve abstracted the load() method away into doRequest.

    • Eugene
      May 19, 2009 at 12:48 pm

      I’m looking into this right now. Perhaps I’ll post something when I’ll figure it all out.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: