PDA

View Full Version : Edit a panels title style



mcadirci
17 Jan 2011, 11:51 PM
Hello,

Is it possible to give a panels title bar different color than others?

Thanks.

Condor
18 Jan 2011, 12:09 AM
Sure.

Give you panel a cls (e.g. cls:'my-panel') and write css rules based on this class to change the panel title (the panel header color is a background-image).

mcadirci
18 Jan 2011, 12:29 AM
Hello Condor,
Thanks for your answer but I have a little problem.
When I set the class property of my panel like:
new Ext.Panel({
renderTo: document.getElementById('groupGrid<c:out value='${group.groupID}' /><%=pageId%>'),
title: tempHtml,
cls: 'mainPageGroupPanel',
html: '<div id="grid<c:out value='${group.groupID}' /><%=pageId%>"></div>',
collapsible: true
});It produces html code like:
<div class=" x-panel mainPageGroupPanel" id="ext-comp-1106">
<div style="-moz-user-select: none;" id="ext-gen386"
class="x-panel-header x-unselectable">
<div id="ext-gen389" class="x-tool x-tool-toggle">&nbsp;</div>But the shown background image comes from the "x-panel-header"
How can I fix this?
Thanks.

Condor
18 Jan 2011, 12:32 AM
Create a css rule:

.mainPageGroupPanel .x-panel-header {
color:#15428b;
border-color:#99bbe8;
background-image: url(../images/default/panel/white-top-bottom.gif);
}
and change some colors and/or images.

mcadirci
18 Jan 2011, 12:59 AM
Thank you very much, I didn't know I can do that with css.

smac
15 Apr 2011, 1:39 AM
Hi - I tried ist like you have written.

Changing border-color und background ist working - but changing color not. Perhaps ist does not work in Ext-Js 4?