he styling for a row can depend on the data for that row which is represented in by a record in the grid's store. To achieve that goal, we can add a CSS class to the row (or better said the <tr> that represents that row) using the config option getRowClass:
Ext.create('Ext.grid.Panel', {
..
viewConfig: {
getRowClass: function(record) {
return record.get('gender') == 'm' ? 'male-row' : 'female-row';
}
}
});
The correspondig CSS classes would then look like:
.male-row .x-grid-cell {
background-color: red;
}
.female-row .x-grid-cell {
background-color: green;
}
You can find a JSFiddle to test here .