如何根据值的变化更改extjs网格单细胞背景颜色？

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 blink once 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）;有任何想法吗？

3 个解决方案

#1

I suggest using getRowClass with 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:

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

Here is demo.

这是演示。

#2

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 renderer if you manipulate cell completely, here is comes 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 attr of TD

如果你使用tdCls，它将被添加到TD的类attr

<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。

#3

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;

},