Changing tab width on tab panel - extjs

Question

I'm writing an app in Sencha-touch. I have 3 tabs in a tab panel. I'd like each one to take up 33% of the width of the tab panel. I've tried using resizeTabs, tabWidth, and even added a class to each item and then referenced it in css to change the width.
Then I also tried using a span element in the html and referencing that. But none of it works. My code is below. How do I change the width of the tabs in a tab panel?
{
xtype: 'tabpanel',
fullscreen: true,
tabBarPosition: 'top',
resizeTabs: true,
tabWidth: '33%',
items:[
{
//title: 'Campus List',
html: '<span class="headerTab">Campus List</span>',
width: '33%',
cls: 'headerTab'
},
{
title: 'Meter List',
html: 'Meter List',
width: '33%',
cls: 'headerTab'
},
{
title: 'Meter',
html: 'Meter',
width: '33%',
cls: 'headerTab'
}
]
}

Answer 1

I figured it out. If you reference the xtype of the tab, not the tabpanel, in your css then it will resize the tabs. Here's what worked.
.x-tab{
width: 33%;
}

Answer 2

{
xtype: 'tabpanel',
tabBarPosition: 'top',
**
defaults: {
flex: 1 //set the width of each item to be equal, in this case => 100%/numberOfItems = 100%/3 = 33.33333%
}
**
items:[
{
title: 'Campus List'
},
{
title: 'Meter List'
},
{
title: 'Meter'
}
]
}
have you tried using "flex" config ?

Answer 3

this the solution that I use
{
xtype: 'tabpanel' ,
fullscreen: true,
tabBarPosition: 'top',
resizeTabs: true,
// use this it helps
minTabWidth : 75,
//*********
items:[
{
//title: 'Campus List',
html: '<span class="headerTab">Campus List</span>',
width: '33%',
cls: 'headerTab'
},
{
title: 'Meter List',
html: 'Meter List',
width: '33%',
cls: 'headerTab'
},
{
title: 'Meter',
html: 'Meter',
width: '33%',
cls: 'headerTab'
}
]
}