Tab Header Background Color

[thenewmexican]

Is it possible to change the tab header background color.


So far. I have But. The tab header stays the default color


getRedColorTab : function(){

var centerPanel = new Ext.form.FormPanel({

region: 'center',


});


var retVal = new Ext.Panel(
{
layout: 'border',
id: "myDiffColorPanel",
title: "My Red Tab",
bodyStyle: 'background-color: #FF0000',

items: [
centerPanel
]

}
);
return retVal;

}


if(createRedTab == true){

tabsArray[arrayIndex++] = com.mystuff.guiBuilding.getRedColorTab();
}


var centerTabPanel = new Ext.TabPanel({
activeTab: 0,
region: 'center',
height: 100,
minTabWidth : 125,
enableTabScroll : true,
resizeTabs : true,
plugins: [scrollerMenu],

items: [
tabsArray

]
});

[httpdotcom]

If you are using the standard Ext CSS files (or any of the themes), the tab headers are LI elements of UL.x-tab-strip, using background images for their style. You will have to add a class to the tab you want to change, and overwrite that style.