PDA

View Full Version : Dynamically set style for Accordion Panel Header.



loophole64
24 Jun 2013, 1:07 PM
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:


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

rtirbany
24 Jun 2013, 2:43 PM
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:

...,
style: {
//your styling here
},

loophole64
25 Jun 2013, 5:56 AM
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.

friend
25 Jun 2013, 8:21 AM
On a related note, I don't think a Panel's header is fully constructed and ready to be manipulated until the afterrender event.

loophole64
25 Jun 2013, 1:01 PM
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.

slemmon
26 Jun 2013, 2:12 PM
See if this example helps you at all:



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


.custom-header .x-accordion-hd
{
background: #D6F5B5;
}

loophole64
27 Jun 2013, 7:38 AM
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:


listeners: {
afterrender: function (panel) {
console.log(panel.getEl());
panel.header.getEl().applyStyle('background', color);
}
}

But that doesn't work.

loophole64
27 Jun 2013, 7:44 AM
I was able to style the header using the dom of its element. The answers in this thread helped me get there. Thanks.


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.

aragm
6 Dec 2013, 11:33 AM
And how implemented the !important modifier to color string ?

loophole64
6 Dec 2013, 12:54 PM
You can impliment the important modifier by adding it to the end of the property value:


color = '#F04545 !important';

aragm
6 Dec 2013, 1:10 PM
didn't work...
I had to put like that:


panel.header.getEl().dom.style.setProperty("background-color", "#04408C", "important");