extjs - タブ パネルのタブ幅の変更

Question

私は Sencha-touch でアプリを書いています。タブパネルに 3 つのタブがあります。それぞれがタブ パネルの幅の 33% を占めるようにしたいと思います。resizeTabs、 、を使用してみましtabWidthたが、各項目にクラスを追加してから、css で参照して幅を変更しました。

次に、htmlでspan要素を使用して参照してみました。しかし、どれも機能しません。私のコードは以下です。タブ パネルのタブの幅を変更するにはどうすればよいですか?

{
    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

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

「フレックス」構成を使用してみましたか？

Answer 2

私はそれを考え出した。xtypeCSS で tabpanel ではなくタブのを参照すると、タブのサイズが変更されます。これが機能したものです。

.x-tab{
    width: 33%;
}

Answer 3

これは私が使用するソリューションです

{

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

}