extjs change grid cell background based on value

Question

I applied a renderer to my grid-column, but the background color is not changing:

renderer: function(value, meta) {
    if (parseInt(value) > 0) {
        meta.tdCls = 'category-matching'; return value;
    }
    else { 
        meta.tdCls = 'category-not-matching'; return value;
    }
}

css:

.x-grid-cell .category-matching {
    background-color:green;
}
.x-grid-cell .category-not-matching {
    background-color:red;
}

I also tried

.grid-cell-inner

and

background-color:red; !important

but no effect.

Any idea?

Merozoite

Answer 1

Try this...

renderer : function(value, meta) {
    if(parseInt(value) > 0) {
        meta.style = "background-color:green;";
    } else {
        meta.style = "background-color:red;";
    }
    return value;
}

It works for me.

Tomfool

Works for me too except you need to add 'return value' or you'll end up with an empty column. – Atiptoe

Answer 2

Inspired by Select Smile... this worked for me:

    var myRender = function (value, metaData, record, rowIndex, colIndex, store, view) {
        if (parseInt(value) < 0) {
            metaData.attr = 'style="background-color:#ffaaaa !important;"';
        }
        return value
    };

and the field

{id: 'dta', dataIndex: 'days_to_arrival', renderer: myRender}

that's it.

ps. done under ExtJS v2.2.1

Sandell

Answer 3

refer to these example

Ext.onReady(function(){
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'change'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"[email protected]",  "change":100  },
            { 'name': 'Bart', "email":"[email protected]", "change":-20  },
            { 'name': 'Homer', "email":"[email protected]",  "change":23   },
            { 'name': 'Marge', "email":"[email protected]", "change":-11   }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
        ],
        height: 200,
        width: 400,
        viewConfig: {
            getRowClass: function(record, index) {
                var c = record.get('change');
                if (c < 0) {
                    return 'price-fall';
                } else if (c > 0) {
                    return 'price-rise';
                }
            }
        },
        renderTo: Ext.getBody()
    });
});

CSS:

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

Workhouse

the values are from the store, so i dont change anything. But for further use cases, it will be useful! – Merozoite

Answer 4

renderer: function (value, metaData) {
    if (parseInt(value) > 0) {
        metaData.tdStyle = 'background-color:#ffaaaa';
    }
    return value
}

Estrange

Even if your code solves the OP issue, it is recommended to add some of the descriptive text to your code snippet. – Denning

Answer 5

Try

.x-grid-cell.category-matching {
    background-color:green;
}
.x-grid-cell.category-not-matching {
    background-color:red;
}

Selfesteem

Also, it would be helpful if you could post the rendered HTML of the grid. – Selfesteem

Answer 6

you can set style in class like this:

js:

columns: {
        items: [
           {
                ...
                innerCls: 'column-ltr',

           }]

css:

.column-ltr{
   direction :rtl;
}

Playboy