Extjs 更改选项卡面板上的选项卡宽度

我正在用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'  
           }
    ]

}

{
xtype:'tabpanel'，
全屏：对，
Tabbar位置：“顶部”，
是的，
tabWidth:'33%'，
项目：[
{
//标题:"校园名单",，
html:“校园列表”，
宽度：“33%”，
cls:“头塔布”
},
{
标题：“仪表清单”，
html:“仪表列表”，
宽度：“33%”，
cls:“头塔布”
},
{
标题:"米",，
html:'米'，
宽度：“33%”，
cls:“头塔布”
}
]
}

我想出来了。如果在css中引用选项卡的

xtype

，而不是tabpanel，那么它将调整选项卡的大小。以下是有效的方法

.x-tab{
    width: 33%;
}

---

您是否尝试过使用“flex”配置？

这就是我使用的解决方案

{

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

}

{
xtype:'tabpanel'，
全屏：对，
Tabbar位置：“顶部”，
是的，
//用这个它会有帮助
最小宽度：75，
//*********
项目：[
{
//标题:"校园名单",，
html:“校园列表”，
宽度：“33%”，
cls:“头塔布”
},
{
标题：“仪表清单”，
html:“仪表列表”，
宽度：“33%”，
cls:“头塔布”
},
{
标题:"米",，
html:'米'，
宽度：“33%”，
cls:“头塔布”
}
]
}

欢迎来到SO。请仔细检查代码的格式。

{

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

}