我正在用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%; }更多推荐
发布评论