1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    37
    Vote Rating
    1
    Answers
    2
    Srikanth474 is on a distinguished road

      0  

    Default Answered: Change tab title color to red

    Answered: Change tab title color to red


    Hello,

    I have a tab panel with 7 tabs in it. when user tries to submit the form and if there are required fields in any of the tabs which are not filled in. i have to show the tab color in red so that user can go into that tab and fill the required field.

    How can i do this?

    Thanks in Advance
    Srikanth

  2. Hi,

    you can use setTitle function of tabpanel at the time you want to change the color of it.
    Just use :-

    Code:
    yourtabpanel'stab.setTitle('<p style="color:red">This is sample</p>')
    For more details, check this:- http://docs.sencha.com/ext-js/4-0/#!...ethod-setTitle

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default use setTitle

    use setTitle


    Hi,

    you can use setTitle function of tabpanel at the time you want to change the color of it.
    Just use :-

    Code:
    yourtabpanel'stab.setTitle('<p style="color:red">This is sample</p>')
    For more details, check this:- http://docs.sencha.com/ext-js/4-0/#!...ethod-setTitle
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    Answers
    106
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    An alternative approach would be to use addClass()/removeClass() on the .tab property of each component which acts as a Tab.

  5. #4
    Sencha User
    Join Date
    Feb 2010
    Posts
    363
    Vote Rating
    5
    Answers
    15
    maneljn is on a distinguished road

      0  

    Default


    if you want to use css, put this in tabchange event listener

    Code:
        onSubpanelTabchange: function(tabpanel, newcard, oldcard, eOpts) {
            if (oldcard) {
                oldcard.tab.btnEl.removeCls('esinube-tabpanel-titulo-activo');
            }
            if (newcard) {
                newcard.tab.btnEl.addCls('esinube-tabpanel-titulo-activo');        
            }
        },
    Code:
    /* Titulos tabpanel activo */
    .esinube-tabpanel-titulo-activo {
      color: rgb(175,0,0) !important;
    }
    -------------------
    Manel Juàrez