如何在 Ext JS 中构建多色选项卡按钮？

Question

美好的一天！

我们正在进行一个项目，基于 Extjs 5.1 的 fontend，我们必须使用 Ext.tab.Panel 实现多色 TabItem，而不仅仅是正文还有 Tab Button/Header。我们可以改变每个 TabItem 的 body 样式，但无法改变 Tab Button/Header。无法为每个 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

很简单，只需在tabConfig下添加cls 属性，这样就可以独立于scss或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()
});

如何在 Ext JS 中构建多色选项卡按钮？

How to build multi color tab button in Ext JS?

javascript

sass

sencha-cmd

extjs5