Ext.ComponentQuery.query or Ext.getCmp

Ext.ComponentQuery.query or Ext.getCmp

When you start with Sencha touch, one of the first things you have to find out is the difference between the following.

Ext.ComponentQuery.query or Ext.getCmp?

Well both do a similar task and yet both are very different. When using them in your Sencha App they will return an item from the visual onscreen assets depending on the parameters you give it.

Same, but different.


will return you an item matching the id you passed it. This will be the fastest method to return an item. All items when created with an id are registered in a single object using their id as a key. So Ext.getCmp( myId) will look up and return theRegistrationObject[“myId”]; So it will be very quick. At the same time its benefit is also its downside. Let’s say you have two components and both have the same id then what happens? Well last in wins. So you might not get back what you where expecting.


This is where Ext.componentQuery.query comes in. It will return an array of items, but it works in a slightly different way. Instead of pulling an item directly from an indexed array (which is dead fast), this will traverse the visual items and create a collection depending on what parameters you give it. If you’re application is really large then this is (potentially) going to be really slow.

In order to make sure its not slow you can pass in a very specific path to get at where your component is located.

E.G. Ext.ComponentQuery.query(
'formpanel selectfield[itemId=dataFilterType]' )[0].getValue();

This will return all selectfield’s that have an itemId of dataFilterType and are children of formpanel. If you know there is only one of these then you can reference the first item in the array and then say gets its value.

I suppose for testing/debugging purposes you should also add an alert/console message if if it returns more than 1 item and you only expect it to return 1.
Might be interesting to see some timings on these calls but that’s for another post.

Update –
Check out this screencast by Jay Garcia on the subject. Plus he explains quite a bit more.

3 Replies to “Ext.ComponentQuery.query or Ext.getCmp”

  1. Ideally you wouldn’t need to use either of these. Implement Deft, have your view components passed into your controller, and you should be good to go.

    You should only be updating view items that belong in the view that your controller is controlling, and it should only be accessing the view items to add listeners (Deft takes care of this), or update the view with model changes.

  2. Cheers for the feedback, I’m still very much in the early learning stages of using Touch. Need to check out what Deft is. I was actually only getting the values from a view component by using its controller. Very much of the mind that the view really shouldn’t do anything.

    I can see that under very specific areas or conditions you might want to use Ext.getCmp but it seems like a bit of code that once built should warn the coder – “do you really think you should be using this!” 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.