ExtJS4中设置tabpanel的tab高度问题

　　最近碰到个问题，在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了。