1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Answers
    1
    Vote Rating
    0
    loophole64 is on a distinguished road

      0  

    Default Answered: Dynamically set style for Accordion Panel Header.

    Answered: Dynamically set style for Accordion Panel Header.


    I have an accordion layout panel which I'm adding several panels to dynamically. I'm trying to add a listener that will change the background color of a panels header. Here's my code:

    Code:
    for (var i in array1) {
        panel = new Ext.Panel({
           id: "pnlContent" + i,
           title: array1[i].name,
           autoScroll: true,
           autoHeight: true,
           flex: 2,
           border: false,
           listeners: {
              beforerender: function (cmp, eOpts) { cmp.header.setStyle("background", "#" + array1[i].color); }
           }
        });
        panel.addCls("accordion-panel");
        panel.html = contentHtml;
        peoplePanel.add(panel);
    }
    The beforerender event handler runs but I don't have access to cmp.header when it runs. Is there some way I can change the style for the header? It doesn't have to be in an event, I could do it while I'm creating the panel as well. Thanks.

    Jason

  2. I was able to style the header using the dom of its element. The answers in this thread helped me get there. Thanks.

    Code:
    listeners: {
        afterrender: function (panel) {
            panel.header.getEl().dom.style.backgroundColor = color;
        }
    }
    Also, in my case I had to add the !important modifier to my color string in order to get it to override the previous style. Other people may not have to do that.

  3. #2
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default


    I'm not 100% clear on the inner workings w/ this but can't you just do a panel.addCls w/ the name of a css style to each instance? It will build out the class name this way.
    Otherwise I seem to recall that there's a style config object for the panel (and I think even a separate setting for styling of the header - headerCls was it?).
    Anyhow, it basically it goes something like:
    Code:
         ...,
         style: {
              //your styling here
         },

  4. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Answers
    1
    Vote Rating
    0
    loophole64 is on a distinguished road

      0  

    Default


    I can just set the class name for the header using a css selector, and I know how to do that, but then I would need a style pre-written. The style needs to be dynamic because the color comes from a web service and I don't know in advance what the colors are going to be, or even what the set of color possibilities is.

    It's true that you can set the panel style using the style property when you create the panel, but I need to style the background of the header specifically. I'm sure there must be some way to manipulate the style of the header element specifically.

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

      0  

    Default


    On a related note, I don't think a Panel's header is fully constructed and ready to be manipulated until the afterrender event.

  6. #5
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Answers
    1
    Vote Rating
    0
    loophole64 is on a distinguished road

      0  

    Default


    Thanks friend. I can access the header now if I do it from the afterrender event instead of beforerender, but I still can't figure out how to set it's style. Dynamically.

  7. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,363
    Answers
    432
    Vote Rating
    200
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    See if this example helps you at all:

    Code:
    Ext.create('Ext.panel.Panel', {
        title: 'Accordion Layout',
        width: 300,
        height: 300,
        defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:15px'
        },
        layout: {
            // layout-specific configs go here
            type: 'accordion',
            titleCollapse: false,
            animate: true,
            activeOnTop: true
        },
        items: [{
            title: 'Panel 1',
            html: 'Panel content!',
            listeners: {
                afterrender: function (panel) {
                    console.log(panel.getEl());
                    panel.getEl().addCls('custom-header');
                }
            }
        },{
            title: 'Panel 2',
            html: 'Panel content!'
        },{
            title: 'Panel 3',
            html: 'Panel content!'
        }],
        renderTo: Ext.getBody()
    });
    CSS used to change the style for the one header
    Code:
    .custom-header .x-accordion-hd
    {
        background: #D6F5B5;
    }
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  8. #7
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Answers
    1
    Vote Rating
    0
    loophole64 is on a distinguished road

      0  

    Default


    Thanks for the reply Slemmon. Unfortunately that doesn't help me. I was already able to change the class of the element dynamically using a pre-written style. I need to change the background style so that whatever color I have in a variable I can apply that color to the background. I need something like this:

    Code:
    listeners: {
        afterrender: function (panel) {
             console.log(panel.getEl());
             panel.header.getEl().applyStyle('background', color);
        }
    }
    But that doesn't work.

  9. #8
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Answers
    1
    Vote Rating
    0
    loophole64 is on a distinguished road

      0  

    Default


    I was able to style the header using the dom of its element. The answers in this thread helped me get there. Thanks.

    Code:
    listeners: {
        afterrender: function (panel) {
            panel.header.getEl().dom.style.backgroundColor = color;
        }
    }
    Also, in my case I had to add the !important modifier to my color string in order to get it to override the previous style. Other people may not have to do that.

  10. #9
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    6
    Vote Rating
    0
    aragm is on a distinguished road

      0  

    Default


    And how implemented the !important modifier to color string ?

  11. #10
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Answers
    1
    Vote Rating
    0
    loophole64 is on a distinguished road

      0  

    Default


    You can impliment the important modifier by adding it to the end of the property value:

    Code:
    color = '#F04545 !important';