PDA

View Full Version : TabPanels hiding Collapse button



Domitian
30 Nov 2007, 3:42 PM
Hey folks, I'm rendering a layout and nesting another layout in the center region. My code is as follows:



var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'north',
contentEl:'header',
width: 64,
fitToFrame:true
},{
region:'west',
title: 'Navigation',
split:true,
width: 200,
collapsible: true,
minSize: 200,
maxSize: 400,
animate: true,
autoScroll:false,
useShim:true,
margins: '0 2 2 2'
},
toolboxPanel,
{
region:'south',
contentEl:'status',
split:false,
cls: 'status',
height: 22
},{
region:'center',
layout:'border',
items:[
new Ext.TabPanel({
region:'south',
deferredRender:false,
activeTab: 0,
split:true,
height: 150,
minSize: 150,
maxSize: 400,
collapsible:true,
titlebar: 'test',
tabPosition:'bottom',
items:[{
contentEl: 'footer',
title: 'Settings',
autoScroll:true
},{
contentEl: 'message-center',
title: 'Messages',
autoScroll:true
}]
}),
{
region:'center',
closeOnTab: true,
tabPosition: 'top'
}]
}]
});


My problem is in the TabPanel the collapse button never appears. Actually it's being hidden by the tab bar. I was wondering if anyone else was experiencing this problem. I did try and include a title to see if that fixed it, but it didn't.

fsakalos
1 Dec 2007, 12:03 PM
I have copied your code to my computer and I used firebug to find out what is problem.

Firebug output:

toolboxPanel is not defined.

First debug the program (best is to use Firefox and its extension which is called Firebug), and then please try to make code more readable. Than I will be able to help you.