EXTJS 4.2 and grid header color

Question

I can't find a way to display grid header (but not simple header) in defined by me: font and background color. Situation is the following: - I have a grid with columns like this:

  -----------------------------------------
    |               name                |
  --|-----------------------------------|--
    |      part 1     |      part 2     |
  --|-----------------------------------|--
    |  p1 |  p2 |  p3 |  p1 |  p2 |  p3 |
  --|-----------------------------------|--

• I have to display ONLY main header field ("name") in special color on special background, let's say white on 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.

Be so kind and tell me why?:

Answer 1

The problem is that the framework draws the headers of the grid as nested div's and subheaders has transparent background, and hence take the background of the parent element (as opposed to the HTML table in which such a grouping is done by colspan property and each header is separate td / th element).

I can offer two solutions for this task:

1. Add cls to your column

   {
       text: 'Contact Info',
       cls: 'customGridHeader',
       columns: [
           {
               text: 'Email',
               dataIndex: 'email'
           },
           {
               text: 'Phone',
               dataIndex: 'phone'
           }
       ]
   }
   

   and via css direct child selector add required styles for column inner div

   .customGridHeader > .x-column-header-inner {
       background: red;
       color: white;
   }
   

   Fiddle

2. Add color to the table header via styles, but you have to add colors to the subheaders aswell (you can use defaults attribture to apply style for all child components)

   Fiddle