ID versus rutas relativas en ExtJS 4

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.

¿Existe algún método mejor?

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.

preguntado el 31 de julio de 12 a las 11:07

2 Respuestas

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 objeto propiedad. Como esto:

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.

Respondido 31 Jul 12, 18:07

you mean, I could use my own ID-properties, which won't get checkt by ExtJS for uniquenes? This sounds nice, thank you :) - K ..

Yes, you can use any property as ID. By convention it's itemId but of course you can use anything. - Alex Tokarev

Usar Ext.getCmpo Ext.get is technically slower, and has pitfalls:

  1. If you have 2 buttons with id="button", which one will be returned? By and large this will just break your program -- you mention this.
  2. You now have to send more code to the client ( Eg for every component you an extra id='my-unique-id' -- this is somewhat pedantic though
  3. The biggest one for me: Ext.get performs dom lookups, and Ext.getCmp looks at this.all[id] This is slower than having a referenced object.

When I say referenced object, I meant :

var grid=Ext.create('Ext.grid.Grid');
var Button =Ext.create('Ext.Button',handler:function(){

or if the grid is too far out of scope, I will use event listeners:

Ext.Panel.getComponent(0).on("change",function(){ // can also use "getComponent("name)

This does sometimes get somwhat bulky, and has its own drawbacks, in that every now and then you have Ext.getCompenent(0).items.items[0].getComponent[1 ].refresh(), though this is generally avoidable.

Respondido el 20 de junio de 20 a las 10:06

Yeah, I try to keep refs, too. But when I got a view, this doesn't work so well. Your example uses items but this is, again, a relative apporach, which can easily break if the view changes :\ - K ..

You should be watching for a change event, and handle your functions that rely on that appropriately - Alex

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.