1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    4
    Vote Rating
    0
    hanneslarsson is on a distinguished road

      0  

    Default Individual active-color on Ext.TabPanel tabbs

    Individual active-color on Ext.TabPanel tabbs


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,203
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    4
    Vote Rating
    0
    hanneslarsson is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,203
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Look at the highlighted DOM element's classes

    Screen Shot 2012-05-31 at 7.34.05 AM.jpg
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    4
    Vote Rating
    0
    hanneslarsson is on a distinguished road

      0  

    Default


    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
      Code:
      iconCls: 'home'
      before, I now have
      Code:
      iconCls: 'home firstTab'
    • In the scss I then had the following styles.
      Code:
      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;   
          }
      }

  6. #6
    Sencha User
    Join Date
    Sep 2013
    Posts
    2
    Vote Rating
    0
    iamsuperbbq is on a distinguished road

      0  

    Default Trying it on an x-tab

    Trying it on an x-tab


    So sorry for bumping but i tried this with x-tab

    span.x-tab.firstTab
    {
    background-color:blue !important;
    }

    then

    iconCls: 'home firstTab' on the item in the tabs.

    The idea is to give each tabpanel a different background color.

    and it doesnt work, any ideas? Thanks!