CODEWITHSUNDEEP
extjs
vrush
vrush

Reputation: 33

Using itemId to fetch component Extjs

I had a problem with tab rendering. The contents of the tabs used to get mixed up as i used the same component on all the tabs and the component had sub-components with id. As the id would appear same on all panels, the components used to get mixed up. I am now using itemId instead of id and the tabs are getting rendered properly. Now I am facing another problem. Initially I used Ext.getCmp(id) to fetch components in the controller. Now that ids are replaced by itemId, I am using the following: Ext.getCmp(id).getComponent(itemId);

There is a deep nesting of components in the view and all the intermediate components have itemId. With the above statement, as I go on to fetch deeper components, the statements keeps extending like:

Ext.getCmp(id).getComponent(itemId1).getComponent(itemId2).getComponent(....;

Am I using the statement correctly? Is there a better shorthand method to achieve the purpose?

Please advice.

Upvotes: 1

Views: 35934

Answers (2)

sra
sra

Reputation: 23973

Basically you using it the right way because a itemId is only unique at component level (at least it has to). But as you might see this will get sort of ugly, therefore I strictly recommend you to use Ext.ComponentQuery or one of it's implementations up() and down() which are both available for most components. Where Ext.ComponentQuery will per default look through the all instantiated components up() and down() will start at the component from which they are executed, only walking through the existing component tree. Also up() and down() always returns the first match where Ext.ComponentQuery always present you a array.

Both accepting the same query string which can be written in various ways (here I recommend you to read the docs)

Here is a example for: 

Ext.getCmp(íd).getComponent(itemId1).getComponent(itemId2)

expecting that you are using panels (it can be any component)

Ext.ComponentQuery.query('panel[id=yourId]>panel[itemId=yourId]>panel[itemId=yourId]');

lets say you are using MVC and therefore all your components are custom (have own xtypes). So if you know, that you have only one instance of 'yourcustompanel' with this itemId you may the simply call:

Ext.ComponentQuery.query('yourcustompanel[itemId=yourId]') // note you get always a array

Upvotes: 11

Sreek521
Sreek521

Reputation: 669

You can use the Ext.ComponentQuery.query(..) or down() or up() to get the component you are referring to.

If you want to get a component(say a button) within a certain component(say within a container) ,you can use

 var button = Ext.ComponentQuery.query('button[type=messageButton]', this);

In the above 'this' refers to the container scope.

Or you can use

var button = this.query('button[type=messageButton]');

In the above also 'this' refers to the container scope.

Hope this helps you ..

Upvotes: 5

Related Questions