Ext JSでマルチカラータブボタンを作成するには？

Question

おはよう！

ExtJSに基づいて、我々が取り組んでいるプロジェクト、fontendがあり5.1我々はExt.tab.Panel体だけでなく、タブボタン/ヘッダーないだけを使用したマルチカラーTabItemを実装する必要があり。それぞれTabItemのボディスタイルを変更できますが、変更することはできませんTab Button/Headerタブボタン/ヘッダーの各セレクタを設定できません。

ここ無地の例であるが、我々は問題を解決するために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

それはちょうどあなたがあなたのscssやcssファイルとは別にスタイルを維持することが可能なtabConfig下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() 
});