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在 CSS 中引用选项卡而不是选项卡面板，那么它将调整选项卡的大小。这是有效的。

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

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

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

}