View Full Version : ExtJS4 - grid header color problem

30 Nov 2015, 1:50 AM
I can't find a way to display grid header (but not simple header) with defined
by me background color. Situation is the following: I have a grid with columns
headers like this:


- I have to display ONLY main header field ("name") in special background
color, let's say red

- in main column ("name") definition I set style: (for font color) cls:
(for defined in css file, background color)

And I can set font color for every "level" of headers differently as I want, but
background color anyway working for all of the headers. I mean when I set
"name" header background color to green all backgraund colors (on "part ..."
level and on "p ..." level) are green.

And the second question - how to set vertical line between ONLY main
headers, I mean "name" level.

Be so kind and suggest me how can I do it properly.

Gary Schlosberg
1 Dec 2015, 2:07 PM
I believe you'd have to do this with CSS.

2 Dec 2015, 4:45 AM
Hi Gary,
thank you very much for quick answer. I tried to write it again and it works – almost perfect.
Background color is ok now, but internal lines between headers “part1”, and “part2” and the same on the third level (between “p..”) disappear (all, vertical and horizontal. I don’t know why (and maybe you can suggest something) but looks quite good.

So the last thing is the second question – how to display vertical lines between ONLY main
headers, I mean "name" level in the grid body.

Gary Schlosberg
2 Dec 2015, 3:08 PM
Oh, I thought that you wanted the lines to disappear between the nested columns. The second part of the CSS I included in my example makes that happen by removing the border. I guess I'm a bit confused as to what you mean by displaying vertical lines only for the main headers.

3 Dec 2015, 12:38 AM
Thank you again Gary.
It isn't my idea it's idea of my client. He wants to see something like this:


The vertical lines are important only in the main body of this grid, not in the
header, in fact. This lines should separate data between different persons.
And (sorry but I'm novice in Ext) I can’t understand this CSS. When I tried to
set e.g. “border: 5 px” header is still without lines inside. So:

my first problem you solved but I want to know what should I do to have lines inside header;
second problem is, that lines – separators between columns in the body of grid should be visible

Gary Schlosberg
3 Dec 2015, 10:21 AM
Looks like I was using 6.x to test, sorry.

I'm really not sure why those header lines are not showing in 4.2.1 since they are visible in the example:

Here's some CSS which I hope makes it look as you require.

As far as getting lines between your columns within the grid body, the CSS should help and is included in the above Fiddle:

.x-grid-cell.x-grid-td {
border-style: solid;
border-bottom: 0px;
border-left-width: 1px;
border-color: #999999;

5 Dec 2015, 10:28 AM
Thanks for the third time, headers now are as I tried to do. Perfect.
But I can’t prepare this vertical lines inside grid. In your example there are all vertical lines
but I want only some of them as on the picture - your example and my needs:


That’s my problem now. The last I hope :-)

Gary Schlosberg
7 Dec 2015, 2:24 PM
If you set the tdCls (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column-cfg-tdCls) config, you can affect the cells for a column (and not all columns). Here's a rough go at it.

8 Dec 2015, 12:16 AM
Great - thank you very much Gary!