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

Question

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?

//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?

Molecular Man · Accepted Answer · 2015-04-16T12:16:22.683

I suggest using getRowClass with applying extra cls to needed columns:

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.

score 11 · Answer 2 · edited Jan 13 '16 at 12:38

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

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

This works in Ext 2.3 with the exception that you need to set metadata.css instead of metadata.tdCls — Radu Maris, Nov 27 '13 at 16:04

score 2 · Answer 3 · edited Jan 15 '14 at 14:09

2

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;

},

edited Jan 15 '14 at 14:09

David

208,112
36
198
279

answered Jan 15 '14 at 13:51

James

21
1

I can't use the row class, because my value is my color. So your solution works for me. The only problem is that the row selection covers the td background. Any ideas ? – user732456 Feb 11 '14 at 16:25

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

3 Answers3

CSS:

Linked