up() and down() versus Ext.getCmp()

Question

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?

Answer 1

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.