CSS 如何根据值更改更改 extjs 网格单单元格背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8034694/
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 change extjs grid single cell background color depending on value changes?
提问by Davor Zubak
To change whole row background color we can use getRowClass, but how to do the same logic only for one cell, and particular column....any ideas?
要更改整行背景颜色，我们可以使用 getRowClass，但是如何仅对一个单元格和特定列执行相同的逻辑......有任何想法吗？
//EXTJS
viewConfig: {
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
}
//CSS
.price-fall {
background-color: #FFB0C4;
}
.price-rise {
background-color: #B0FFC5;
}
EDIT:
编辑：
There is a way of doing this with:
有一种方法可以做到这一点：
function change(val){
if(val > 0){
return '<div class="x-grid3-cell-inner" style="background-color:#B0FFC5;"><span style="color:green;">' + val + '</span></div>';
}else if(val < 0){
return '<div class="x-grid3-cell-inner" style="background-color:#FFB0C4;"><span style="color:red;">' + val + '</span></div>';
}
return val || 0;
}
and then just:
然后只是：
...
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change', align: 'center'}
...
but this way grid gets deformed on changes from white to colored background... ???
但是这样网格会随着从白色到彩色背景的变化而变形......？
any other ideas?
还有其他想法吗？
EDIT
After custom css is applyed to the column, how to remove the same in a short period of time, so it appears to blinkonce when the value has changed? Something like setTimeout("remove-css()",1000);or with Ext.Function.defer(remove-css, 1000);
Any ideas?
编辑
自定义css应用到列后，如何在短时间内删除相同的内容，所以当值改变时它会闪烁一次？类似setTimeout("remove-css()",1000);或有Ext.Function.defer(remove-css, 1000);
任何想法？
回答by Molecular Man
I suggest using getRowClasswith applying extra cls to needed columns:
我建议使用getRowClass将额外的 cls 应用于所需的列：
Ext.create('Ext.grid.Panel', {
columns: [
// ...
{ header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' },
// ...
],
viewConfig: {
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
},
// ...
});
CSS:
CSS：
.price-fall .x-change-cell {
background-color: #FFB0C4;
color:red;
}
.price-rise .x-change-cell {
background-color: #B0FFC5;
color:green;
}
Here is demo.
这是演示。
回答by efirat
There is also another method I found when I am doing another thing;
还有一种方法是我在做别的事情的时候发现的；
In column definition:
在列定义中：
{
dataIndex: 'invoicePrintedFlag',
header: 'Fatura',
width: 50,
renderer : function(value, metadata, record) {
if (record.get('invoiceAddressId') != null){
metadata.tdCls = metadata.tdCls +" alertedCell";
}
return '<span class="iconbox icon-'+ value +'"></span>';
}
}
you can use rendererif you manipulate cell completely, here is comes metadata:
renderer如果您完全操作单元格，则可以使用，这是metadata：
metadata: Object {tdCls: "", style: ""}
if you use style it will be added to content DIV inside TD
如果您使用样式，它将被添加到 TD 内的内容 DIV
<td class=" x-grid-cell x-grid-cell-gridcolumn-1067" id="ext-gen1432">
<div unselectable="on" class="x-grid-cell-inner x-unselectable" style=" text-align: left;" id="ext-gen1426">
// Content comes here
</div>
</td>
if you use tdCls, it will be added to class attrof TD
如果您使用tdCls，它将被添加到attrTD类
<td class=" x-grid-cell x-grid-cell-gridcolumn-1067 alertedCell " id="ext-gen1462">
<div unselectable="on" class="x-grid-cell-inner x-unselectable" style="; text-align: left;" id="ext-gen1463">
// Content comes here
</div>
</td>
Also you can return html as you want.
您也可以根据需要返回 html。
回答by James
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdAttr = 'style="background-color:#b0e987;color:black;"';
value=Ext.util.Format.number(value, '$ 0,000.00');
return value;
},
