View Full Version : Tab Header Background Color

18 Aug 2009, 5:03 PM
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: [

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: [


18 Aug 2009, 6:45 PM
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.