View Full Version : How to set data grid's cell font color/background dynamically

26 Dec 2011, 11:21 PM
In a data grid, if the content of the cell is "pass", I want to set the font to green.
if the context of the cell is "fail", I want to set the font to red.

I found a article about set the backgroud of cell.
but it seems it's not dynamically, you have to set the renderer when you define the ColumnModel
but my situation is you don't know which cell should be pass or fail before you check the database.
this is the link I found

http://www.sencha.com/forum/showthread.php?42750-trying-to-set-individual-cell-s-background-color-or-image-in-gridpanel (http://www.sencha.com/forum/showthread.php?42750-trying-to-set-individual-cell-s-background-color-or-image-in-gridpanel)

anyone have solution for this?
Thank you in advance

27 Dec 2011, 3:52 AM
In the renderer can't you just check whether it's a pass or fail and add a different class accordingly?

renderer: function(value, meta, record) {
if (record.get('success') === 'pass') {
meta.tdCls = 'pass';
else {
meta.tdCls = 'fail';

return value;

29 Dec 2011, 2:04 AM
so it seems I still need more knowledge to implement this, so I'll verify this later :D
thanks in advance

16 Jan 2012, 6:27 PM
I add renderer in the defination of gridpanel, and I set breakpoint at renderer function, but it don't stop at all.

extend: 'Ext.grid.Panel',
title: 'Result' ,
store: undefined,
width: undefined
loadMask: true,
disableSelection: false,
//columns: flatColumn, // dynamic
closable: true,
padding: 0,
renderer: function(value, meta, record) {
var newvalue;
if (record.get('success') === 'pass') {
newvalue = "<span style='color:red;font-weight:bold' >"+value+"</span>";
else {
newvalue = value;
return newvalue;

16 Jan 2012, 6:35 PM
maybe I need to and this renderer for the column....
try now

16 Jan 2012, 6:36 PM
The renderer goes on the column, not the grid. It will then be called for each cell in that column.

Wrapping the text in a span isn't really the right way to do it. You can set meta.tdCls to specify a CSS class to add to the td element, then it's just a case of writing suitable CSS rules in your stylesheet. The problem most people hit with writing the CSS rules is getting sufficient CSS selector specificity to overrule the default ExtJS stylesheet. There's no trick to it, you just need to understand CSS specificity and write your selectors accordingly.

16 Jan 2012, 6:57 PM
Thank you, yes, it should be on the column.

I'll check about the css solution after this :D