One of the most common tasks for a developer when developing an Ext JS application is dealing with the complexity of nested components. For example, let’s say that you have a simple Ext.panel.Form definition that resembles something like this:

  • Form Panel
    • Toolbar
      • Save Button
      • Cancel Button
    • Field Set
      • Field Container
        • Field 1
        • Field 2
      • Field Container
        • Field 3
        • Field 4
    • Field Set
      • Field Container
        • Field 5

Leaving aside all that Ext JS does behind the scenes to simplify management of forms in general, we see that even a simple form definition like this has a fairly complex structure.

Now to the task at hand: given this complex structure, how do we go about retrieving a given component from within this hierarchy? For example, let’s say that we want to specifically target Field 5. How do we do it?

By Id

One approach that was used in the past was to manually assign an id to the component and use Ext.getCmp() to retrieve it.

// field definition
...
{
    xtype: 'textfield',
    id: 'myfield'
}
// let's get it...
var field = Ext.getCmp( 'myfield' );

The really nice part of this is that it’s fast. The downside, however, can be pretty significant. Since the id has to be unique, you not only have to manually More >