Changing the bar under the tabpanel labels in ExtJS 4.2

Question

I'm developing a Web App using ExtJS 4.2, and I want the layout to look something like this:

So far, I've implemented the different colors for the Tab Label. I made a css file with the following properties:

.x-tab-first.x-tab-default-top{
    background: rgb(0, 169, 180) !important;
}

.x-tab-second.x-tab-default-top{
    background: rgb(251, 183, 18) !important;
}

.x-tab-third.x-tab-default-top{
    background: rgb(2, 153, 130) !important;
}

And in each of the tab in the tab panel, I assigned the corresponding class as their cls, so the first tab has x-tab-first as its cls, and so on.

But as you can see in the following photo, if I click on "Find us here", the tab contents changes accordingly, but the bar below does not change:

And for the other two tabs, the bar below does not change as well, it just stays as is.

I have tried this:

.x-tab-second-active.x-tab-bar-body{
    background: rgb(251, 183, 18) !important;
}

However I am not quite sure where and how to place this code.

I want the bar below the tab titles to follow the color as well.

Answer 1

As per your requirement, you need to add your activeTab cls to tabbar-strip by manually on tabchange event.

In this FIDDLE, I have created a demo using tabpanel. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

CSS part

<style>
    .x-my-tabpanel .x-tab-bar {
        background: red;
    }

    .x-my-tabpanel .x-tab-default-top {
        border: 0px !important;
        box-shadow: 0px 0px 0px;
    }

    .x-my-tabpanel .x-tab-bar-strip {
        top: 23px;
        height: 5px !important;
    }

    .x-tab-first.x-tab-default-top,
    .x-tab-first.x-tab-bar-strip {
        background: rgb(0, 169, 180);
        border-color: rgb(0, 169, 180);
    }

    .x-tab-second.x-tab-default-top,
    .x-tab-second.x-tab-bar-strip {
        background: rgb(251, 183, 18);
        border-color: rgb(251, 183, 18);
    }

    .x-tab-third.x-tab-default-top,
    .x-tab-third.x-tab-bar-strip {
        background: rgb(2, 153, 130);
        border-color: rgb(2, 153, 130);
    }

    .x-my-tabpanel .x-tab .x-tab-inner {
        color: #fff;
    }

</style>

ExtJS part

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.tab.Panel', {
            height: 200,
            renderTo: Ext.getBody(),
            cls: 'x-my-tabpanel',
            activeTab: 0,
            defaults: {
                padding: 10
            },
            items: [{
                title: 'What to Expect',
                html: 'What to Expect'
            }, {
                title: 'Find us here',
                html: 'Find us here'
            }, {
                title: 'Game Machenics',
                html: 'Game Machenics'
            }],
            listeners: {
                /*
                 * this event will fire on view render
                 */
                afterrender: function (panel) {
                    var clsArr = ['first', 'second', 'third'];
                    panel.query('tab').forEach((item, index) => {
                        let cls = `x-tab-${clsArr[index]}`;
                        item.addCls(cls);
                        item.cls = cls;
                    });
                    this.addToStripCls();
                },
                /*
                 * this event will fire on tab change
                 */
                tabchange: function (panel, newtab) {
                    this.addToStripCls();
                }
            },
            /*
             * this function will set active tab cls to strip
             * before to adding we need to remove previous cls
             */
            addToStripCls: function () {
                var strip = Ext.get(this.el.query('.x-tab-bar-strip')[0]),
                    clsArr = ['first', 'second', 'third']

                clsArr.forEach(el => {
                    if (strip.hasCls(`x-tab-${el}`)) {
                        strip.removeCls(`x-tab-${el}`);
                    }
                });
                strip.addCls(this.activeTab.tab.cls);
            }
        });
    }
});