PDA

View Full Version : Accessing element using ComponentQuery



Sneha004
23 Feb 2012, 5:34 AM
Hi ,

I have one question ,Can anyone suggest some solution regarding to this problem?

Problem Description :
If one container is having more number of panels then how to access them using ComponentQuery not using Ext.getCmp() function.

I mean in Controller , How to refer these panels in refs attribute as below :

refs:[
{
selector:'viewport >container >panel',
ref:'panelList'
}
]

The above container in selector having more panels.Will it be possible to refer those panels without using 'id' of that particular panel?

Please give me some solution ..
I am trying for it but unfortunately I could not find any solution.

I think ,I have described clearly.
If anybody didnot get it please let me know

Thanks

vietits
23 Feb 2012, 5:56 AM
You can include panel property to distinguish each panel. Ex: suppose you assign each panel a unique name then:


refs:[{
selector:'viewport > container > panel[name=panel1]',
ref:'panelList1'
},{
selector:'viewport > container > panel[name=panel2]',
ref:'panelList2'
}]

Sneha004
26 Feb 2012, 10:43 PM
Thanks vietits for your reply,,

I have one doubt , If we give unique name to panel then why we don't give unique ID to each panel?
So we can access the particular panel using their IDs.

Please clarify my doubts.

Sneha004
26 Feb 2012, 10:46 PM
In ExtJS 4 , there is no config called 'name' for panel.

So, How can I access the more number of panels using 'refs' ?

Please give some valuable solution ....

vietits
26 Feb 2012, 11:45 PM
I have one doubt , If we give unique name to panel then why we don't give unique ID to each panel?
So we can access the particular panel using their IDs.

Of course, you can use itemId if you want to as long as it is unique.



In ExtJS 4 , there is no config called 'name' for panel.

Yes, that is right. However, with component (and any objects in general) you can add custom properties as long as it is not the same as its existing properties. I used 'name' just as an example, you can use any thing you want. Let have a try and you will see it works.



So, How can I access the more number of panels using 'refs' ?

I don't clearly understand your question? What does it mean?

Sneha004
27 Feb 2012, 4:53 AM
Thank vietits for your reply ,

In ExtJS4 , We are not supposed to use Ext.getCmp() function .
If I give different name for different panel it'll be same as using Id of the component which violates the rule for ExtJS4.

Then What is the solution to access more number of panels using refs ?

please clarify my doubts.......

friend
27 Feb 2012, 4:57 AM
Child components can also use itemId, where the value of this attribute only has to be unique within the parent container.

To get a parent container's child panel which uses itemId: 'child1':


var firstChildPanel = Ext.ComponentQuery.query('container #child1')[0]

If you already have an object reference to the parent container:


container.down('#child1')

The same thing goes for refs:


refs:[{
selector:'viewport > container #child1',
ref:'panelList1'
},{
selector:'viewport > container #child2',
ref:'panelList2'
}]