如何将背景颜色(或自定义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类,因为我想将背景颜色应用于应用程序中的特定网格,而不是全部.

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

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

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如果要在自定义列上保持悬停效果,还需要重新定义.

Answer 2

tdCls在列标题定义中添加一个属性,其值为您要使用的CSS类.

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