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