ExtJS4如何设置tabpanel的tab的高度？默认情况下，高度太矮了，标题字段都被截掉了。

[obullxl]

Hi，各位大虾，请问在ExtJS中如何设置tabpanel的tab的高度。默认情况下，tab的高度太矮了，以至于tab的标题底部字都被截掉了。

[网络科技]

tabpanel.minHeight = ‘500’
应该是这样子的，跟我问的那个差不多，但我问的按钮如何设计默认的宽度，作为全局的。
http://topic.csdn.net/u/20120811/12/ffc2f055-abf0-48fb-b6db-74c815f492a3.html?seed=2019540770&r=79379157#r_79379157

[obullxl]

[Quote=引用楼主 的回复:]
Hi，各位大虾，请问在ExtJS中如何设置tabpanel的tab的高度。默认情况下，tab的高度太矮了，以至于tab的标题底部字都被截掉了。
[/Quote]
谢谢你的答复，我不是要设置tabpanel的高度，而是设置tabpanel的每个tab的标题的高度。

可见参见截图：http://www.oschina.net/question/95289_64140

[网络科技]

Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
bodyPadding: 10,
tabPosition: 'bottom',
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one',
minHeight = ‘50’//这样试下看是否可行

}
],
renderTo : Ext.getBody()
});

[网络科技]

笔误，更正下：
minHeight = ‘50’//这样试下看是否可行
改为：minHeight:‘50’//这样试下看是否可行

[linkt]

我也 遇到这个问题

[VF]

同样的问题，没人会吗？

[ccie_123]

求解答呀 我也有此问题~~

[yibey]

不知道是什么问题，

如果只是为了每个tab的高度的话，自然tab高度依赖于tabpaenl的高度，tabpanel又依赖于外层组件的高度，，
你这里如果仅仅吧tabpanelrenderTo body的话，那tabpanel在渲染的时候就自动高度了，所以你想要它主动扩大高度，必须吧tabpanel设置一个高度或者设置一个最小高度。
如果在其他容器里的话，比如panel什么里的，只需要吧panel的layout设置成fit即可

[不訴離傷]

先写CSS样式
<style type="text/css">
#tab-id .x-tab-bar-body
{
height: 40px !important;
}

#tab-id .x-tab-bar-strip
{
top: 38px !important;
}
</style>

DEMO如下：
Ext.onReady(function () {
Ext.create('Ext.tab.Panel', {
frame: true,
height: 150,
width: 300,
activeTab: 1,
id: 'tab-id',
renderTo: Ext.getBody(),
tabBar: {
height: 40,
defaults: {
height: 37
}
},
items: [
{ title: '标签页1', html: '标签页1' },
{ title: '标签页2', html: '标签页2' }
]
});
});


主要就是这个属性
tabBar: {
height: 40,
defaults: {
height: 37
}
}
里面的高度一个是TAB的标题高度，一个是TAB BAR本身的高度，注意里面还有一个分割线，就是那个x-tab-bar-strip对应的线条。若是要改整个项目，就不需要那个ID下的类这样写CSS。
我已经测试过，这样可行。

[不訴離傷]

最近CSS怪怪的，回复都没反应。还经常404你懂的。。无言。。

这个先限制ID下的CSS类
<style type="text/css">
#tab-id .x-tab-bar-body
{
height: 40px !important;
}

#tab-id .x-tab-bar-strip
{
top: 38px !important;
}
</style>

Ext.onReady(function () {
Ext.create('Ext.tab.Panel', {
frame: true,
height: 150,
width: 300,
activeTab: 1,
id: 'tab-id',
renderTo: Ext.getBody(),
tabBar: {
height: 40,
defaults: {
height: 37
}
},
items: [
{ title: '标签页1', html: '标签页1' },
{ title: '标签页2', html: '标签页2' }
]
});
});
主要这个属性

tabBar: {
height: 40,//tab bar高度
defaults: {//tab 里的title的高度
height: 37
}
},

注意需要用id: 'tab-id',这个限制CSS类哦。这样就可以了。

[obullxl]

[Quote=引用 9 楼 的回复:]

先写CSS样式
<style type="text/css">
#tab-id .x-tab-bar-body
{
height: 40px !important;
}

#tab-id .x-tab-bar-strip
{
top: ……
[/Quote]
按照你的方法，标题确实是增加大了，但是有个新问题，活动标签和非活动标签下面都是1条实线。

而原来是是：活动Tab1条线，非活动2条线。


还望大虾帮忙解答~~

[obullxl]

@xieyijun1986 能否帮忙解决下，谢谢~~~