風格ExtJS的組件

Question

我有如下創建一個ExtJS的標籤面板：

menuTabs = Ext.create('Ext.tab.Panel', { 
    border: 0, 
    region: 'center', 

    cls: 'mainTabPanel', 

    items: [ 
     { 
      title: 'Tab 1', 
      html: 'Tab 1 Details' 
     }, 
     { 
     title: 'Tab 2', 
     html: 'Tab 2 Details' 
     } 
    ] 
}); 

現在我想樣式面板改變：

1. 背景標籤欄
2. 按鈕背景
的
3. 身體背景。

有人可以幫助我嗎？

Answer 1

第一和最後一個很簡單：

/* 1. background of tab bar */ 
.mainTabPanel .x-tab-bar-default-top { 
    background: green; 
} 

/* 3. body background.*/ 
.mainTabPanel .x-panel-body-default { 
    background: pink; 
} 

按鍵部分是更難，因爲你有邊框，陰影，不同的狀態（活躍，懸停，...）=>我只測試了它在Chrome中，這將不會在< IE9中運行，並且尚未在其他瀏覽器中進行測試。你需要檢查每個瀏覽器，並確保它的工作原理，並可能添加按鈕的瀏覽器相關的CSS。

/* 2. button background */ 

.mainTabPanel .x-tab-default { 
    background: yellow; 
    border: none; 
    box-shadow: none; 
} 
.mainTabPanel .x-tab-default.x-tab-default-active { 
    background: purple; 
    border: none; 
    box-shadow: none; 
} 

http://jsfiddle.net/Vandeplas/hsELW/1/