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?

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.

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