ExtJs: avoid using the id property -unless you have to

In ExtJs you find youself locating components by identifier all the time, as in

Ext.getCmp( 'myToolbar' );

instead of referencing them like this:

myWindow.myToolbar;

A main cause for this is the fact that in ExtJs you work with config objects all the time, and the real objects that will be created based on that config are not there yet. You have to use some kind of identifier to refer to them.

We often use the id property as the identifier for objects because it is natural to relate id with identifier.

But sometimes using id for this purpose is a bad thing, because the id has a larger meaning. It assigned as the id for the dom object corresponding to this element, or at least as the base for those ids.

This means that the id must be globally unique. Therefore, you’ll get a collision if two different panels have a status bar that happen to have the same id (not uncommon for a large application).

What you want in most cases is for an identifier to be unique in a certain context, not globally unique. You want to have a unique identifier for a button in a window, but don’t care if you have two buttons with the same identifier in different windows, right?

I recommend you use itemId instead of id as the default way to identify ExtJs components. Use id if you are going to perform dom related tasks.

To locate an element by itemId you can use the ComponentQuery , as well as the up, down and child methods in components/containers.

Whereas you used to write

Ext.getCmp( 'myToolbar' );

now you will be best served by something like

myWindow.down( '#myToolbar' );

which will look for a component with the myToolbar itemId somewhere below the myWindow container.