如何在Ext JS中建立多色標籤按鈕？

Question

美好的一天！

有一個項目，我們正在努力，fontend基於ExtJS的5.1，我們必須實現使用Ext.tab.Panel不僅身體而且標籤按鈕/頭多色TabItem。我們能夠改變每個TabItem的身體風格，但無法更改標籤按鈕/標頭。無法爲每個選項卡按鈕/標頭設置任何選擇器。

這裏是普通的例子，但我們必須實現它在ExtJS的MVVM

Ext.create('Ext.tab.Panel', { 
    width  : 300, 
    height : 200, 
    activeTab : 0, 
    items  : [{ 
     title : 'Tab 1', 
     html : 'A simple tab' 
    }, { 
     title : 'Tab 2', 
     html : 'Another one' 
    }], 
    renderTo : Ext.getBody() 
}); 

首先請您還跟解決這個問題？

Answer 1

這很簡單，只需要添加tabConfig，通過它可以從你的scss或css文件分開保持風格下cls屬性。這裏是例子： -

Ext.create('Ext.tab.Panel', { 
    width  : 300, 
    height : 200, 
    activeTab : 0, 
    items  : [{ 
     title  : 'Tab 1', 
     cls  : 'tab-item-01-body', 
     tabConfig : { 
      tooltip : 'Tab 1', 
      cls  : 'tab-item-01-head' 
     }, 
     html  : 'A simple tab', 
    }, { 
     title  : 'Tab 2', 
     cls  : 'tab-item-02-body', 
     tabConfig : { 
      tooltip : 'Tab 2', 
      cls  : 'tab-item-02-head' 
     }, 
     html  : 'Another one' 
    }], 
    renderTo : Ext.getBody() 
});