PDA

View Full Version : Extjs4 : GroupTabPanel > Howto Change tab



tdikarim
1 Oct 2012, 11:36 PM
Hi all,
Thanks in advance for your help

I have define a viewport that contain in center a grouptabpanel.
In panel_1 I have a button. When I click on "mybutton" i want to change grouptab and display panel_2 (like if I click on it)

I have try this but nothing change :


changeGroupTab = function(Panel_id) {
var tab = Ext.getCmp(Panel_id);
var tabGroup = tab.ownerCt;
var groupingPanel = tabGroup.ownerCt;

groupingPanel.setActiveGroup(tabGroup);
tabGroup.setActive(tab);
}




var panel_1 = Ext.create('Ext.panel.Panel', {
id:'panel_1',
title: 'title panel 1',
layout:'fit',
cls: 'my-panel',
bodyPadding: 0,
bodyStyle: 'padding:0px',
dockedItems: [
{
itemId: 'toolbar',
xtype: 'toolbar',

items: [
mybutton
]

}

]
items:[grid_test]
});


Define grouptabpanel :


{
region: 'center',
xtype: 'grouptabpanel',
enableTabScroll: true,
animScroll:true,
tabWidth: 100,
activeGroup: 0,
id:'groupTab',

items: [
{
id:'mainMenu_1',
expanded: false,
items: {
id: 'menu1',
title: 'menu1...',
bodyPadding: '0 0 0 10',
layout: 'fit',
border: false,
items: [
panel_1
]
}
},
{
id:'mainMenu_2',
expanded: false,
items: {
id: 'menu2',
title: 'menu2...',
bodyPadding: 10,
layout: 'fit',
border: false,
items: [
panel_2
]
}
}

]
}


Thanks
Karim

scottmartin
5 Oct 2012, 3:54 PM
Howto Change tab

Have you tried setActiveTab:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ux.GroupTabPanel-method-setActiveTab