关于CSS：如何根据值更改更改extjs网格单单元格背景颜色？

How to change extjs grid single cell background color depending on value changes?

要更改整个行的背景色，我们可以使用getRowClass，但是如何仅对一个单元格和特定列执行相同的逻辑...任何想法？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//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;
}

编辑：

有一种方法可以通过以下方式实现：

1
2
3
4
5
6
7
8

function change(val){
if(val > 0){
return '' + val + '';
}else if(val < 0){
return '' + val + '';
}
return val || 0;
}

然后是：

1
2
3

...
{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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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：

1
2
3
4
5
6
7
8

.price-fall .x-change-cell {
background-color: #FFB0C4;
color:red;
}
.price-rise .x-change-cell {
background-color: #B0FFC5;
color:green;
}

这是演示。

我做另一件事时发现了另一种方法；

在列定义中：

1
2
3
4
5
6
7
8
9
10
11
12

{
dataIndex: 'invoicePrintedFlag',
header: 'Fatura',
width: 50,
renderer : function(value, metadata, record) {
if (record.get('invoiceAddressId') != null){
metadata.tdCls = metadata.tdCls +" alertedCell";
}

return '';
}
}

如果完全操纵单元，则可以使用renderer，这是metadata：

1	metadata: Object {tdCls:"", style:""}

如果使用样式，它将被添加到TD

中的内容DIV中

1
2
3
4
5

<td class=" x-grid-cell x-grid-cell-gridcolumn-1067" id="ext-gen1432">

// Content comes here

</td>

如果使用tdCls，它将被添加到TD

的类attr

1
2
3
4
5

<td class=" x-grid-cell x-grid-cell-gridcolumn-1067 alertedCell" id="ext-gen1462">

// Content comes here

</td>

此外，您还可以根据需要返回html。