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

Question

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

Answer 1

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

Answer 2

谢谢你的答复，我不是要设置tabpanel的高度，而是设置tabpanel的每个tab的标题的高度。可见参见截图：http://www.oschina.net/question/95289_64140

Answer 3

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()
});

Answer 4

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

Answer 5

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

Answer 6

先写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。
我已经测试过，这样可行。

Answer 7

最近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类哦。这样就可以了。

Answer 8

按照你的方法，标题确实是增加大了，但是有个新问题，活动标签和非活动标签下面都是1条实线。而原来是是：活动Tab1条线，非活动2条线。
还望大虾帮忙解答~~

Answer 9

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