PDA

View Full Version : Coloring (styling) Grid header cells individually



anjelika
17 Aug 2009, 3:27 AM
Hello,
What I'm trying to achieve is to color 4 Grid Header Cells (I am using GroupHeader plugin) in 4 diffrent colors (red, blue, orange and gray).
I know that I can apply custom styles to a portion of the header(a cell) by knowing its ID (http://extjs.com/forum/showthread.php?t=2403) but how can I make sure that I have a static ID with that cell?
Is there a better way to do it?
Thanks

Condor
17 Aug 2009, 3:39 AM
Give your columns an id (this doesn't need to be a globally unique id) and create a css rule for:

.x-grid3-td-[id-of-column1] {background-color: red;}
.x-grid3-td-[id-of-column2] {background-color: green;}
.x-grid3-td-[id-of-column3] {background-color: blue;}

If you only want to do this for a single grid you could add a cls to the grid config and create a css rule for

.[cls-of-grid] .x-grid3-td-[id-of-column1] {background-color: red;}
.[cls-of-grid] .x-grid3-td-[id-of-column2] {background-color: green;}
.[cls-of-grid] .x-grid3-td-[id-of-column3] {background-color: blue;}

anjelika
17 Aug 2009, 4:09 AM
Hi,
Thanks for the quick reply.
I've tried your solution which seems logical to me but without success.
I've assigned to my header cell an ID and added the css line in a css file but it does not affect the background-color in either way.
Also, tried to change that style in Firebug (changing width and other attributes was OK) without success.
Is there something I'm missing?
Here's some sample code:

...
{
header : 'Vodafone',
colspan : 3,
id : 'header_Vodafone',
align : 'center'
}
...

And then in the css file I'm using I've put:


...
.x-grid3-td-header_Vodafone {
background-color: red;
}

Condor
17 Aug 2009, 4:13 AM
Did you verify with Firebug that the header td element did receive a x-grid3-td-header_Vodafone class?

anjelika
17 Aug 2009, 4:18 AM
Yes, it did, as you can see from the screen capture.

anjelika
17 Aug 2009, 4:29 AM
I figured it out, it works using this:

.x-grid3-td-header_Vodafone {
background-color: red !important;
background-image: none !important;
} in my css.
Thanks Condor :)