如何将背景颜色（或自定义 css 类）应用于网格中的列 - ExtJs 4？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6673573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply background color (or custom css class) to column in grid - ExtJs 4?
提问by LittleTreeX
It seems like it should be so simple, but I simply cannot get this done (I don't even need it done dynamically). For example, suppose I have a simple 2 column grid setup like so:
看起来它应该如此简单，但我根本无法完成（我什至不需要动态完成）。例如，假设我有一个简单的 2 列网格设置，如下所示：
columns : [
{header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'},
{header: 'CATEGORY', dataIndex: 'category', width:100}
]
The cls: 'red'attribute only effects the header and not the actual column. I have seen elsewhere that I should be using a custom renderer (maybe), but if I try something like:
该cls: 'red'属性仅影响标题而不影响实际列。我在其他地方看到我应该使用自定义渲染器（也许），但是如果我尝试类似的东西：
{header: 'USER', dataIndex: 'firstName', width:70,
renderer: function(value) {
this.addCls('red');
return value;
}
}
I still get the boring white background. I have also seen people using a renderer function definition like so : function(value, metadata, record, rowIndex, colIndex, store), but when I used an alert()to test the input parameters I get undefinedfor everything except value, which makes me believe that maybe this was only valid for versions before ExtJs 4.
我仍然得到无聊的白色背景。我也看到有人使用像这样的渲染器函数定义 : function(value, metadata, record, rowIndex, colIndex, store)，但是当我使用 analert()来测试输入参数时undefined，除了 之外的所有内容我都得到了value，这让我相信这可能只对 ExtJs 4 之前的版本有效。
I also tried returning something like '<span class="red">' + value + '</span>'in my renderer function, but this only highlighted the text, rather than change the entire background of the column.
我还尝试'<span class="red">' + value + '</span>'在渲染器函数中返回类似的内容，但这只会突出显示文本，而不是更改列的整个背景。
I do not want to override the default Ext css classes because I want to apply the background colors to a specific grid in the app, and not all of them.
我不想覆盖默认的 Ext css 类，因为我想将背景颜色应用于应用程序中的特定网格，而不是全部。
Furthermore, all the columns of the grid in question may have different colors (note that in the example I only added the class to the first column).
此外，有问题的网格的所有列可能有不同的颜色（请注意，在示例中，我只将类添加到第一列）。
Assume that redis defined as .red {background:#FF0000;}in my css file.
假设它在我的 css 文件中red定义.red {background:#FF0000;}。
回答by LittleTreeX
While the grid-faq suggested by atian25 does not apply to ExtJs 4, I was able to use it to guide me towards the correct answer to my question.
虽然 atian25 建议的 grid-faq 不适用于 ExtJs 4，但我能够使用它来指导我找到问题的正确答案。
In the javascript, add an ID attribute to your column definition:
在 javascript 中，将 ID 属性添加到您的列定义中：
{header: 'SomeHeader', id: 'myColumn' dataIndex: 'theData'}
This will generate the following css class for all the td elements in that column:
这将为该列中的所有 td 元素生成以下 css 类：
.x-grid-cell-myColumn
In your css file (which must be loaded after the Ext css file) add the following definition:
在您的 css 文件（必须在 Ext css 文件之后加载）中添加以下定义：
.x-grid-table .x-grid-cell-myColumn {background:#FF0000;}
And bingo, you have a bright red background for said column. Using this same technique you can customize individual columns any way you want.
和宾果游戏，你有一个明亮的红色背景为所述列。使用相同的技术，您可以以任何您想要的方式自定义各个列。
NOTE: without using the .x-grid-tableselector the "row" classes specificity will win. You will also need to redefine .x-grid-row-overif you want to maintain a hover effect over your custom column.
注意：如果不使用.x-grid-table选择器，“行”类的特异性将获胜。.x-grid-row-over如果要在自定义列上保持悬停效果，您还需要重新定义。
回答by GreenGiant
Add a tdClsattribute to your column header definition, with a value of the CSS class you want to use.
将tdCls属性添加到您的列标题定义，并使用您要使用的 CSS 类的值。
columns : [
{header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'},
{header: 'CATEGORY', dataIndex: 'category', width:100}
]
回答by atian25
you'd better read this: http://www.sencha.com/learn/grid-faq/
你最好读这个：http: //www.sencha.com/learn/grid-faq/
the section 'To modify a cell/row/column'
“修改单元格/行/列”部分
回答by livesmart360
The goal is to apply one cls to column, which I did with getRowClassand then remove it after 1-2 sec. The websync is pushing new data every 5 seconds, so when this changes to cell appear, it should be like a blink of a changed column(cell), that goes back to "white"(default) before new data refresh? The value assigned to compare new records with is 0, but in a real case is last value that is being compared!
目标是将一个 cls 应用到我所做的列上，getRowClass然后在 1-2 秒后将其删除。websync 每 5 秒推送一次新数据，所以当这个单元格更改出现时，它应该就像一个更改的列（单元格）闪烁，在新数据刷新之前回到“白色”（默认）？分配给与新记录比较的值是 0，但在实际情况下是正在比较的最后一个值！
