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

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.


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.