PDA

View Full Version : Customisable Margin required in TabPanel Widget



dbhatte
6 Mar 2012, 12:10 AM
Kindly suggest an elegant way to add margin to Tab in TabPanel. I need to add margin to some of the Tabs in order to display the Tabs in a grouped fashion.

I have tried applying css classes to tab elements, but its always over-ridden by the inline css generated by the Widget.

Any help will be appreciated!

I am using Ext Js 4.0

mitchellsimoens
6 Mar 2012, 10:34 AM
defaults : {
margin : 50
}

Put that on the Tab Panel and that will have each tab have a margin of 50px.

dbhatte
6 Mar 2012, 8:09 PM
I had already tried the following. But, it ends up adding margin to the content and not to the tabs.


var tabs2 = Ext.createWidget('tabpanel', {
renderTo: Ext.get('tabContainer'),
activeTab: 0,
width: 1000,
height: 800,
defaults :{
margin: 50
},
items: [{
id : "overview",
title: 'Overview',
html: "Can't see me cause I'm disabled",
},{
disabled: true
},
{
title: 'Tape',
html: "Can't see me cause I'm disabled"
},{
title: 'NDMP',
html: "Can't see me cause I'm disabled"
},{
disabled: true
},{
title: 'Storage Servers',
html: "Can't see me cause I'm disabled"
},{
title: 'Disk Pools',
listeners: {
activate: function(tab){
loadContent();
}
},
html: "<div id='tableContainer'></div>"
},{
disabled: true
},{
title: 'Storage Units',
html: "Can't see me cause I'm disabled"
},{
title: 'Storage Unit Groups',
html: "Can't see me cause I'm disabled"
}
]
});

skirtle
6 Mar 2012, 9:53 PM
You might be able to get it working using tabConfig (do a Find on the following page):

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Panel

I believe tabbar just uses vbox/hbox so you should be able to get margins to work using the same configs as you would for a normal vbox/hbox. It should just be a case of getting the right config setting in the right place.

dbhatte
7 Mar 2012, 2:25 AM
Thanks a lot! That worked just fine!! :D