View Full Version : How to make the tab panel collapsible in border layout

12 Apr 2010, 9:03 AM

I have a requirement where i need a Tab panel in the south region which is collapsible...i tried to add one but for some reason the collapsible is not working for tab panel...its adding a panel header only for collapsing on top of the tab panel in firefox and in safari and ie its not even visible....or else sometimes its making the tab panel closable not collapsible...

i am looking for just a tab panel in the south region in the border layout which will be collapsible just like the panel component...i am really stuck on this one...Please help


12 Apr 2010, 10:38 AM
You have to nest your TabPanel in another collapsible Panel with layout:'fit'.

12 Apr 2010, 2:32 PM
thats not helping, when i tried to do that, its giving me an extra panel title header , i want the whole tab panel to be collapsed without having an extra panel title header, i tried to put it in the box component but thats not working as well..,plz help

12 Apr 2010, 3:14 PM
Don't set the title of the TabPanel, but rather Panel it is contained in.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.0/resources/images/default/s.gif';

Ext.onReady(function() {
var vp = new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
title: 'Center Region',
margins: '5 5 0 5'
}, {
region: 'south',
split: true,
height: 300,
title: 'South Region',
collapsible: true,
margins: '0 5 5 5',
layout: 'fit',
items: {
xtype: 'tabpanel',
border: false,
activeTab: 0,
items: [
{title: 'Tab 1'},
{title: 'Tab 2'},
{title: 'Tab 3'},
{title: 'Tab 4'},
{title: 'Tab 5'}

13 Apr 2010, 8:22 AM
I really appreciate your reply, i saw your code and that was what i did as well but thats not what i wanted.. let me be more specific, in the code you have provided..in the south region, there is this extra Panel with the title South region..i completely want to eliminate that, instead i want the little collapsible icon to display beside the tabs at the complete right end of it, which means all the tabs will be on the left side and the icon which is for collapsing will be on the right end..i was trying various ways but could nt find the right fit for it...


13 Apr 2010, 8:27 AM
I see. It is not possible right out of the box. Try searching the forums for a plug-in, that does it. I never seen one myself, though.

13 Apr 2010, 8:41 AM
dawesi has written a inline Toolbar plugin for the TabPanel.

maybe that helps you