PDA

View Full Version : HELP! Tabpanel problem



ivanzhaowy
25 Jun 2010, 1:56 AM
I make a tab panel layout like this:
21109

When I randomly click one of the tabs, not in order from the first to the last, here comes the problem:
21111

21110

All the tabs in the tabpanel pile up!

The firebug doesn't catch any exception, and even this happened, just click the tab from the first to end, everything is fine again!

Anyone can told me what's the problem? Thanks! B)

Condor
25 Jun 2010, 3:34 AM
Can you post your tabpanel config?

ivanzhaowy
25 Jun 2010, 3:58 AM
Can you post your tabpanel config?
Here is the tabpanel config, they are defined in a container with vbox layout:


{
xtype: 'container',
autoEl: 'div',
region: 'center',
split: true,
layout: 'vbox',
itemId: 'centerContainer',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'tabpanel',
flex: 1,
border: false,
region: 'center',
split: true,
itemId: 'tabAbove'
},
{
xtype: 'tabpanel',
flex: 1,
border: false,
region: 'south',
split: true,
itemId: 'tabBelow'
}
]
}
And tabs are insert to the tabpanel like this:


this.getComponent('centerContainer').getComponent('tabAbove').add(
new PXM_Production_Projects_TaskGrid({
title : 'All Tasks',
iconCls : 'taskAll'

}), new PXM_Production_Projects_TaskGrid({
title : 'Active Tasks',
iconCls : 'taskActive'
}), new PXM_Production_Projects_CostGrid({}));
this.getComponent('centerContainer').getComponent('tabAbove').setActiveTab(0);
this.getComponent('centerContainer').getComponent('tabBelow').add(
new PXM_Production_Projects_TicketGrid({}), new PXM_Production_Projects_ElementGrid({}),
new PXM_Production_Projects_AssetGrid({}), new PXM_Production_Projects_VersionGrid({}),
new PXM_Production_Projects_SubmissionGrid({}), new PXM_Production_Projects_ReferencePanel({}),
new PXM_Production_Projects_SetInfoPanel({}));
this.getComponent('centerContainer').getComponent('tabBelow').setActiveTab(0);

Animal
25 Jun 2010, 4:22 AM
Difficult to tell, but it looks like a CSS problem.

Check your hideMode, and the hide CSS class added to the hidden tabs. Then track what styling properties that inherits.

ivanzhaowy
25 Jun 2010, 4:42 AM
I have found the problem:
21115

This is the three tabs above. When I click the third one, only the first tab is inserted the x-hide-display class; When I click the second tab then another, the second can be inserted x-hide-display correctly.

How to fix it?
Thanks!

ivanzhaowy
25 Jun 2010, 5:07 AM
Solved!

I set all the tabs hidden property to true, then it solved.

Seems it's a bug, insert x-hide-display class can't be insert to the tabs which are dynamically generated by TabPanel.add() or TabPanel.insert(), even TabPabel.setActiveTab() is called. I think all the tabs should hide automatically except the active one.

Animal
25 Jun 2010, 5:29 AM
They do. Of course they do! That's what TabPanel means.

You are doing something wrong, and we can't see enough of your code to tell what.