css - 如何将背景颜色(或自定义 css 类)应用于网格中的列 - ExtJs 4？

Question

看起来应该如此简单，但我根本无法完成(我什至不需要动态完成)。例如，假设我有一个简单的 2 列网格设置，如下所示:

    columns : [       
       {header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'},
       {header: 'CATEGORY', dataIndex: 'category', width:100}
    ]

cls: 'red'属性只影响标题而不影响实际的列。我在别处看到我应该使用自定义渲染器(也许)，但如果我尝试类似的东西:

{header: 'USER', dataIndex: 'firstName', width:70, 
     renderer: function(value) {
         this.addCls('red');
         return value;
    }
 }

我仍然得到无聊的白色背景。我还看到人们使用这样的渲染器函数定义:function(value, metadata, record, rowIndex, colIndex, store) ，但是当我使用 alert()测试我得到的输入参数 undefined对于除 value 之外的所有内容，这让我相信这可能只对 ExtJs 4 之前的版本有效。

我还尝试返回类似 '<span class="red">' + value + '</span>' 的内容在我的渲染器函数中，但这只突出显示了文本，而不是更改列的整个背景。

我不想覆盖默认的 Ext css 类，因为我想将背景颜色应用到应用程序中的特定网格，而不是所有网格。

此外，所讨论的网格的所有列都可能有不同的颜色(请注意，在示例中我只将类添加到第一列)。

假设red定义为 .red {background:#FF0000;}在我的 CSS 文件中。

Answer 1

虽然 atian25 建议的 grid-faq 不适用于 ExtJs 4，但我能够使用它来指导我找到问题的正确答案。

在 javascript 中，将 ID 属性添加到您的列定义中:

{header: 'SomeHeader', id: 'myColumn' dataIndex: 'theData'}

这将为该列中的所有 td 元素生成以下 css 类:

.x-grid-cell-myColumn

在您的 css 文件中(必须在 Ext css 文件之后加载)添加以下定义:

.x-grid-table .x-grid-cell-myColumn {background:#FF0000;}

还有宾果游戏，你有一个鲜红色的背景用于所述列。使用相同的技术，您可以按照自己的方式自定义各个列。

注意:如果不使用 .x-grid-table 选择器，“行”类特异性将胜出。如果您想在自定义列上保持悬停效果，您还需要重新定义 .x-grid-row-over。