ExtJS 4 set background color to a cell - extjs4

Question

Is there a way in ExtJS 4 to add a background colour to the cells in the whole table, depending only on the value in the cell and not on the columns?

Answer 1

Add renderer to your column:
renderer: function (val, metadata, record) {
var backgroundColor = null;
if (val) {
if (val == 1) backgroundColor = "green";
if (val == 2) backgroundColor = "red";
}
metadata.style = 'background-color: ' + backgroundColor + ';';
return '';
}
Here is a working example: https://fiddle.sencha.com/fiddle/b73

Answer 2

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

Answer 3

Basicly what you want to do is:
Create 1 renderer for all columns:
columns:{
defaults: {
renderer: myrenderer
},
items:[
//your column definitions here...
]
}
The renderer is smth like this:
var myrenderer = function(value, metaData, record, rowIndex, colIndex, store, view) {
if (value >= 0 && value < 25) {
metaData.tdCls += 'x-change-cell-red';
} else if (value >= 25 && value < 50) {
metaData.tdCls += 'x-change-cell-orange';
} else if (value >= 50 && value < 75) {
metaData.tdCls += 'x-change-cell-yellow';
} else if (value >= 75 && value < 100) {
metaData.tdCls += 'x-change-cell-green';
} else if (value === 100){
metaData.tdCls +='x-change-cell-awesome-green';
}else {
metaData.tdCls += 'x-change-cell-violet';
}
return value + '%';
}