How to build multi color tab button in Ext JS?

Question

Good day!

There is a project we are working, fontend based on Extjs 5.1 where we have to implement multi color TabItem using Ext.tab.Panel not only the body but also the Tab Button/Header. We are able to change the body style of each TabItem but unable to change Tab Button/Header. Unable to set any selector for each Tab Button/Header.

Here is the plain example but we have to implement it in 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()
});

Would you please kind enough to resolve the issue?

Answer 1

It's very simple, just add cls property under tabConfig by which you can maintain the style separately from your scss or css file. Here is the example :-

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