Question

There are two major ways in getting components in ExtJS 4. By a global ID or by a relative path.

The ID approach has the benefit of finding any component independent of it actual position within the view. So when the view changes, the system still works. But as the system gets bigger and bigger I need to use IDs with namespaces and implement some mechanism to generate unique IDs for multiple instances of a component.

When I use relative navigation with component queries, I don’t have to worry about IDs and just navigate, for example, from the clicked button to the grid I want to change and do it. But when the view changes it’s possible that the query doesn’t work anymore and the system breaks.

So both of the approaches seem suboptimal.

Is there any better method?

After reading the answers here I’m using this approach:

In the views I define my components with a lid (local ID) which has to be unique it’s siblings, but not globally unique like id.

Now I can use queries like this:

someWindowInstances[0].query( 'button[lid=myButton]' );

...

someWindowInstances[n].query( 'button[lid=myButton]' );

This enables “myButton” to be anywhere in the windows and if the window view changes, I still find it.

Answer 1

If by relative path you mean query() method, then that’s the way to go. Don’t forget that you can query a component not only by DOM attributes, but by its xtype and basically any object property. Like this:

var panel = new Ext.panel.Panel({
    items: [{
        xtype: 'button',
        prop:  'foo'
    }],

    renderTo: Ext.getBody()
});

var button = panel.query('button[prop="foo"]')[0];

Actually, this is one of the most powerful and less known features of Ext JS 4. Be descriptive, use query() instead of Ext.getCmp() and you’ll get much better code: easy to read and maintain.