The styling for a grid cell can be changed depending on a value of the record. A column renderer is used to set the tdCls individually for each cell.
xt.create('Ext.grid.Panel', {
...
columns: [
...
{
header: 'Gender',
dataIndex: 'gender',
renderer: function(value, meta) {
if (value == 'm') {
meta.tdCls = 'male-cell';
return 'I am male.';
}
meta.tdCls = 'female-cell';
return 'I am female.';
}
}]
...
The corresponding CSS-classes would then look like:
.male-cell{
background-color: red;
}
.female-cell{
background-color: green;
}
You can find a JSFiddle to test here .