Changing tab width on tab panel

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'  
           }
    ]

}