1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    13
    Vote Rating
    0
    Soumya27 is on a distinguished road

      0  

    Default Change Active panel header in Accordion

    Change Active panel header in Accordion


    Screen shot 2012-11-09 at 11.29.20 AM.png



    Hi ,

    I need the header color of the selected panel(currently expanded mode) to be changed dynamically.
    Can u suggest how to achieve this?


    .x-accordion-hd {
    background: red !important;
    font-size:20;
    }


    .x-accordion-hd .x-panel-header-text {
    color: white;
    font-size:15;
    }

    The above CSS is applied for ALL. But I need this to happen only for the expanded panel.(i.e. in diagram represents panel2 header)

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    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


    Have you inspected the DOM to see what classes are on the active/expanded item?
    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
    Aug 2012
    Posts
    13
    Vote Rating
    0
    Soumya27 is on a distinguished road

      0  

    Default


    I am able to see the below classes used when I do an inspect element.

    x-panel-header x-docked x-panel-header-default-framed x-horizontal x-panel-header-horizontal x-panel-header-default-framed-horizontal x-top x-panel-header-top x-panel-header-default-framed-top x-docked-top x-panel-header-docked-top x-panel-header-default-framed-docked-top x-unselectable x-accordion-hd

    but when I override all using cls/comp id, it is not reflecting.

Thread Participants: 1