Home > Uncategorized > id vs. itemId

id vs. itemId

In Ext JS 2.x if you need to access any component anywhere in your code and you don’t have an object reference available, you have to assign that component an id and later pass it to Ext.ComponentMgr.getCmp() method (or its alias Ext.getCmp()) to retrieve the reference to the component. Since Ext JS uses a global MixedCollection to store components’ id’s, you must use unique id for every component that you create. While it has worked for most developers, it is often hard to keep track of used ids, especially if you are a member of a bigger team that works on one project.

In Ext JS 3.0 an itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext.getCmp(), use itemId with Ext.Container.getComponent() which will retrieve itemId’s or id’s. Since itemId’s are an index to the container’s internal MixedCollection, the itemId is scoped locally to the container, avoiding potential conflicts with Ext.ComponentMgr which requires a unique id.

var c = new Ext.Panel({
    height: 300,
    renderTo: document.body,
    items: [{
        itemId: 'p1',
        title: 'Panel 1',
        height: 150
    }, {
        itemId: 'p2',
        title: 'Panel 2',
        height: 150

var p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
var p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling
Categories: Uncategorized
  1. May 18, 2009 at 6:03 pm

    Great Example! thanks

  2. Iulian
    May 19, 2009 at 2:32 am

    Very useful feature. Thanks for sharing!

  3. crysfel
    May 19, 2009 at 10:42 am

    i didn’t know about this, thanks for share 😉

  4. July 16, 2009 at 6:44 am

    The ‘itemId’ feature was also available in the 2.x branch, but was not used by many. You could consider the ‘ref’ config that came out with 3.x to be its easier to use replacement.

  5. March 16, 2011 at 5:15 pm

    Great example. Very succinct and clear.

  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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: