如何在grid -ExtJs4中将背景色(或自定义css类)应用于列？
这看起来应该很简单，但我就是做不到(我甚至不需要动态完成它)。例如，假设我有一个简单的两柱轴网设置，如下所示：
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()测试输入参数时，我得到了除value之外的所有内容的undefined，这让我相信这可能只适用于ExtJs4之前的版本。
我还尝试在我的渲染器函数中返回类似'<span class="red">' + value + '</span>'的内容，但这只突出显示了文本，而不是改变列的整个背景。
我不想覆盖默认的Ext css类，因为我想将背景颜色应用于应用程序中的特定网格，而不是所有背景颜色。
此外，有问题的网格的所有列可能具有不同的颜色(请注意，在本例中，我只向第一列添加了类)。
假设在我的css文件中red被定义为.red {background:#FF0000;}。
回答 4
Stack Overflow用户
发布于 2012-03-01 01:52:13
在列标题定义中添加一个tdCls属性，其中包含要使用的CSS类的值。
columns : [
{header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'},
{header: 'CATEGORY', dataIndex: 'category', width:100}
]Stack Overflow用户
发布于 2011-07-14 22:48:49
虽然atian25建议的grid-faq不适用于ExtJs4，但我能够使用它来指导我找到问题的正确答案。
在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;}bingo，你有一个明亮的红色背景的列。使用同样的技术，您可以随心所欲地自定义单个列。
注意:如果不使用行选择器，“.x-grid-table”类的特异性将胜出。如果希望在自定义列上保持悬停效果，还需要重新定义.x-grid-row-over。
Stack Overflow用户
发布于 2011-07-13 19:46:47
你最好读一读这个：http://www.sencha.com/learn/grid-faq/
“修改单元格/行/列”部分
https://stackoverflow.com/questions/6673573
复制相似问题
腾讯云开发者
