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