最近碰到个问题，在ExtJS中应该如何设置tabpanel的tab的高度？因为默认情况下，tab的高度太矮了，以至于tab的标题底部字都被截掉。设置了个tabpanel.minHeight = ‘500’，但是这个仅仅是设置tabpanel的高度，而不是设置tabpanel的每个tab的标题的高度。随后，又改成了minHeight:‘50’，好像效果还是不理想。
如果只是为了每个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。
这个是限制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类。这样就ok了。