要改变整行背景颜色，我们可以使用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;
}
编辑：
有一种方法可以这样做：
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;
}
然后只是：
...
{header: 'Change',width: 75,sortable: true,renderer: change,dataIndex: 'change',align: 'center'}
...
但是这样一来，网格会从白色到彩色背景变化变形？
任何其他想法？
编辑
在自定义CSS应用于列后，如何在短时间内删除相同的值，所以当值发生变化时，它似乎闪烁一次？像setTimeout(“remove-css()”，1000);或使用Ext.Function.defer(remove-css，1000);
有任何想法吗？
解决方法
我建议使用getRowClass应用额外的cls到需要的列：
Ext.create('Ext.grid.Panel',{
columns: [
// ...
{ header: '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：
.price-fall .x-change-cell {
background-color: #FFB0C4;
color:red;
}
.price-rise .x-change-cell {
background-color: #B0FFC5;
color:green;
}
这是demo。
