css - EXTJS 4.2 和网格标题颜色

Question

我找不到在我定义的字体和背景颜色中显示网格标题(但不是简单标题)的方法。 情况如下: - 我有一个包含这样列的网格:

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

• 我必须只显示主标题字段 (“名称”)在特殊背景上以特殊颜色显示， 比方说红底白字

• 在我设置的主列(“名称”)定义中 样式:(用于字体颜色) cls: (用于在css文件中定义，背景颜色)

而且我可以为标题的每个“级别”设置字体颜色 与我想要的不同，但背景颜色无论如何 为所有标题工作。

这么客气，告诉我为什么？:

Answer 1

问题在于框架将网格的标题绘制为嵌套的 div 和子标题具有透明背景，因此采用父元素的背景(与 HTML 表格相反，其中此类分组由 colspan 属性完成并且每个 header 都是单独的 td/th 元素)。

我可以为这个任务提供两种解决方案:

1. 将cls 添加到您的专栏

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

   并通过 css 直接子选择器为列内部 div 添加所需的样式

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

   Fiddle

2. 通过 styles 为表头添加颜色，但您也必须为子标题添加颜色(您可以使用 defaults 属性为所有应用样式子组件)

   Fiddle