PDA

View Full Version : Selector syntax for panels within subpanels



sarabjeetd
19 Mar 2012, 11:37 AM
I have a panel with border layout. The panel in the south region has a panel with its own border layout.
How do I access the sub panels in the south region using selector syntax.



Ext.define('ProbeSummaryTable', {
extend: 'Ext.panel.Panel',
alias: 'widget.probe_summarytable',
title: 'Probe Summary Page',
layout: 'border',
height: 700,
defaults: {
collapsible: false,
split: true,
bodystyle: 'padding: 15px'
},
items: [{
region: 'center',
title: 'Probe Table',
xtype: 'panel',
flex: 3
},
{
region: 'east',
title: 'Probe Details',
xtype: 'panel',
collapsible: true,
flex: 1
},
{
region: 'south',
split: true,
layout: 'border',
height: '50%',
frame: false,
items: [{
region: 'center',
title: 'Volume',
xtype: 'shared_TimeChart',
html: 'Volume here',
flex: 1
},{
region: 'west',
title: 'Latency',
xtype: 'shared_TimeChart',
flex: 1
},{
region: 'east',
title: 'CPU',
xtype: 'shared_TimeChart',
html: 'CPU Graph goes here',
flex: 1
}]
}],

mitchellsimoens
19 Mar 2012, 11:46 AM
Are you going to have a button or anything where a root can be established or are you just going to try and do it from Ext.ComponentQuery.query?

sarabjeetd
19 Mar 2012, 11:56 AM
The root panel is 'probe_summarytable'.

vietits
19 Mar 2012, 4:43 PM
Example of getting reference to shared_TimeChart panel:


var shared_TimeChart_panel = Ext.CompanyQuery.query('probe_summarytable panel[region=south] shared_TimeChart');

sarabjeetd
20 Mar 2012, 1:54 AM
Thanks. This fixed the problem.

luiscortes
26 Jun 2012, 3:21 PM
In the excellent answer provided by vietits (thanks for answering this):

Ext.CompanyQuery.query

I think a minor correct is to use:

Ext.ComponentQuery.query

Also, I am guessing this question should be marked, "answered" (I don't know if this is automatic or someone at Sencha needs to do this).