26

I'm very confused which one I need to use for grep object between up() down() and Ext.getCmp(ID).

For me, it is easier that define ID to object and retrieve the object by Ext.getCmp('ID') and the code looks more clean.

For example:

console.log(this.up('panel').up('panel').down('grid'));
console.log(Ext.getCmp('myPanel'));

which one is better for performance?

abatishchev
  • 98,240
  • 88
  • 296
  • 433
Expert wanna be
  • 10,218
  • 26
  • 105
  • 158
  • getCmp is probably better for performance. you should use UUIDs if you are gonna use getCmp though. Performance isn't everything. – Neil McGuigan Aug 09 '12 at 16:39

2 Answers2

34

There are severe gotchas with using IDs and getCmp to find your components. The primary issue is that you can not reuse the component safely because in most cases the markup will create HTML elements with duplicate IDs, which is invalid HTML. Additionally, when you have two components with the same ID you will run into unexpected behavior that is difficult to track because the framework will not get a correct reference to your components.

There are several blog and forum posts on this, as well as a video by J. Garcia covering this topic. The suggested way to use getCmp is for debugging only, switching to other methods (up, down, refs, itemId, and ComponentQuery) for production-ready code.

hopper
  • 13,060
  • 7
  • 49
  • 53
dbrin
  • 15,525
  • 4
  • 56
  • 83
  • 8
    May I give a contrasting view: I think putting the words 'component reuse' and 'two component with the same IDs' next to 'id' is odd - it has been shouted many times that an id must be unique. I'm one of the people who cares for what the DOM looks like so there are plenty of ids and ItemIds just not to get the auto-generated ids ExtJS gives. I just think that the fact one uses ExtJS shouldn't mean a gorilla-style DOM. – Izhaki Aug 09 '12 at 11:40
  • 2
    Regardless, given this is the accepted answer and for the benefit of others, I think the title of the question should change to something like 'Should I or shouldn't I use IDs with ExtJS'. I was under the impression the performance was the key question. – Izhaki Aug 09 '12 at 11:42
  • 1
    Izhaki, I agree with your 'judicial' use of IDs where appropriate. I use them myself for the core layout of the viewport components. But look at the question - too many people don't understand the implication of using the component IDs and their impact on the DOM and the application behavior. – dbrin Aug 09 '12 at 16:32
  • Good one! And gz to 6K ;-) – sra Jan 30 '13 at 18:02
15

Ext.getCmp() uses a hash map internally, so it is lighting fast, nearly as fast as retrieving the value in an array based on a key.

.up() and down() are implemented using a traversal of the component hierarchy, which is a slower process.

But up() and down() use selectors, so they can also select classes, not just ids.

You just need to remember that are various situations where you might want to use up() or down(), like when there's a common handler for a multitude of controls, or when the component you're after was auto-generated by the framework so you cannot give it an id yourself.

Izhaki
  • 23,372
  • 9
  • 69
  • 107
  • I've heard that it's not a very good practice to use getCmp because if you need access to the object, you should be able to easily grab it in the controller. I realize there are situations where this just does not work, but I'm just saying what I've heard. – incutonez Aug 08 '12 at 21:04
  • Well, admittedly when the MVC framework is used, you're likely to see less of `Ext.getCmp()` and more usage of `refs` and their corresponding getters. But I'd say it's more of a styling business than anything. Another advantage of using refs is that if you change the id of a component, you only need to update it in the refs, where with `getCmp()` you'll need to do a code base search-replace. – Izhaki Aug 08 '12 at 21:08
  • Yep, that's another reason why I've heard using the MVC framework is better. I mean, it makes sense to use it if you can, but like I said, sometimes you have to use getCmp. – incutonez Aug 08 '12 at 21:35
  • So, you say that Ext.getCmp is lighting fast in Ext JS 4 whereas in 3 I should avoid it? http://www.sencha.com/forum/showthread.php?109307-Screencast-quot-The-dangers – Christiaan Westerbeek Feb 04 '13 at 10:35
  • No. If you look at the [source](http://docs.sencha.com/ext-js/3-4/source/ComponentMgr.html#Ext-ComponentMgr) of `Ext.getCmp` in 3.4, you'll see it is very fast as well. – Izhaki Feb 04 '13 at 13:22