更改选项卡面板上的标签宽度(Changing tab width on tab panel)

更改选项卡面板上的标签宽度(Changing tab width on tab panel)

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

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

最满意答案

我想到了。 如果您在css中引用选项卡的xtype而不是tabpanel，那么它将调整选项卡的大小。 这是有效的。

.x-tab{ width: 33%; }

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%; }