Individual active-color on Ext.TabPanel tabbs

[hanneslarsson]

I am looking for a way to have five tabs in a view that extends the Ext.TabPanel and where all tabs should have there own $active-color.

My wishes are that the first tab, when active, is red and all the "selected" items in that panel, could be a list or other things, should have the same active-color as the tab. Then the second tab should have blue as its color, the third green and so on.

Is there a lean way to do this? to change the active-color for all I can set $active-color in the sass file, but this will effect all tabs and I want to control every tab individually.

Thanks!
Hannes

[mitchellsimoens]

You should give each tab it's own cls and then in your SASS manually use the active class name within each cls. You can't use just the variable, you need to do this manually.

[hanneslarsson]

Thanks for the help!
I have tried to find how to set the active color (not the $ative-color) via a sass class but can't find the correct selector for it. Do you know what selector it is that I should bee looking for?

[mitchellsimoens]

Look at the highlighted DOM element's classes

Screen Shot 2012-05-31 at 7.34.05 AM.jpg

[hanneslarsson]

WORKED LIKE A CHARM!!! =)

Thanks!

Here is how I did it:

• I added a individual cls to the iconCls on each tab. If I hade

  iconCls: 'home'

  before, I now have

  iconCls: 'home firstTab'

• In the scss I then had the following styles.
  

  div.x-tab.x-tab-normal.x-iconalign-center.x-tab-active {    
      span.x-button-icon.firstTab {
          background-color: #ff0000;
          background-image: none;
      }
      span.x-button-icon.secondTab {
          background-color: #00ff00;
          background-image: none;   
      }
      span.x-button-icon.thirdTab {
          background-color: #0000ff;
          background-image: none;   
      }
  }