ExtJS 4 - Apply CSS to grid headers individually

Question

I'm trying to apply some CSS to the headers (just the headers themselves - not the entire column) in a grid. Should be fairly easy I'd think but haven't been able to figure it out.

I've set up a jsFiddle here that contains a grid. I'd like the Name header to be bold, and the DOB header to be red.

Any help would be greatly appreciated, thanks!

Answer 1

If I uncomment cls in your columns definitions it works on fiddle.

Answer 2

try this in your CSS:

.x-column-header-text{color:blue;}

to change headers individually use:

.x-column-header-text#gridcolumn-1011-textEl{color:blue;}
.x-column-header-text#gridcolumn-1012-textEl{color:red;}

check: http://jsfiddle.net/6en2r/1/

forgot to mention the nth-child selector:

.x-column-header:nth-child(2){color:red;}
.x-column-header:nth-child(1){font-weight:bold; color: black;}