ExtJS4中設定tabpanel的tab高度問題

幕三少發表於2013-07-02
JS

　　最近碰到個問題，在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了。


相關文章