Changing the bar under the tabpanel labels in ExtJS 4.2 - css

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