PDA

View Full Version : grouptabpanel setting active group/tab?



jclark42796
18 May 2012, 7:14 AM
I have the following code where I want panel B to be the active panel when the page loads. This is dynamic so I'm not looking for a hard coded solution, i.e. it could be panel A or C depending on conditions. The correct panel appears, but the selected "Group B" tab is not selected. Is there a more correct way to go about this?

Thanks,
Jim



var groupApanels = [
{
title: "Panel 1",
html: "panel 1"
},
{
title: "Panel 2",
html: "panel 2"
}
];

var groupBpanels = [
{
title: "Panel 3",
html: "panel 3"
},
{
title: "Panel 4",
html: "panel 4"
}
];

var groupCpanels = [
{
title: "Panel 5",
html: "panel 5"
},
{
title: "Panel 6",
html: "panel 6"
}
];

var grouptabpanel = Ext.define('MyGroupTabPanel',{
extend: 'Ext.ux.GroupTabPanel',
alias: 'widget.mygrouptabpanel',
tabWidth: 150,
activeTab: 0,
activeGroup: 0,
items: [{
items:[
{title: "Group A",items: groupApanels, id: 'panelA'},
{title: "Group B",items: groupBpanels, id: 'panelB'},
{title: "Group C",items: groupCpanels, id: 'panelC'}
]
}]
});

var viewport = Ext.define('MyViewport',{
extend: 'Ext.container.Viewport',
alias: 'widget:myviewport',
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margins: '0 0 5 0'
}, {
region: 'center',
id: 'mygrouptabpanel',
xtype: 'mygrouptabpanel'
}],

initComponent: function(){
var self = this;
this.on('afterlayout', function(){
Ext.getCmp('mygrouptabpanel').setActiveGroup(Ext.getCmp('panelB'));
Ext.getCmp('mygrouptabpanel').setActiveTab(Ext.getCmp('panelB'));
});
this.callParent();
}
});


Ext.application({
name: 'HelloExt',
launch: function() {
new MyViewport();

}
});

scottmartin
18 May 2012, 9:51 AM
Moved to Q&A

Scott.