2

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.

2 Answers 2

2

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.

2
  • you mean, I could use my own ID-properties, which won't get checkt by ExtJS for uniquenes? This sounds nice, thank you :)
    – K..
    Aug 1, 2012 at 9:00
  • Yes, you can use any property as ID. By convention it's itemId but of course you can use anything. Aug 1, 2012 at 22:02
2

Using Ext.getCmp, or 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. http://jsperf.com/ext-js-reference-vs-lookup

When I say referenced object, I meant :

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

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)
    grid.refresh},
this);

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.

2
  • 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..
    Jul 31, 2012 at 11:45
  • You should be watching for a change event, and handle your functions that rely on that appropriately
    – Alex
    Jul 31, 2012 at 11:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.