Javascript 如何在ExtJS中构建多色选项卡按钮？

你好

我们正在进行一个基于Extjs 5.1的fontend项目，我们必须使用

Ext.tab.Panel

实现多色

TabItem

，不仅要使用主体，还要使用选项卡按钮/标题。我们可以更改每个

TabItem

的主体样式，但无法更改选项卡按钮/标题。无法为每个选项卡按钮/标题设置任何选择器

这是一个简单的示例，但我们必须在ExtjsMVVM

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

---

请您解决这个问题好吗？

非常简单，只需在

tabConfig

下添加

cls

属性，就可以将样式与

scs

或

css

文件分开维护。以下是一个例子：-

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