EXTJS 4.0.7 Grid Row Styles not rendering

[MakrelJohnson]

Hello, I've been struggling this morning with viewConfig in my Grid Panel setting styles based on cell value.
The style is being added but the styles are not rendering. ex: yellow background is not displaying, yet you can inspect element and it's built to have a yellow background.

viewConfig in the grid construction:

viewConfig: {
getRowClass: function(record, index, rowParams, store) {
var cls = '';
var data = record.data;
if (data.assignedto != '') {
cls = 'yellow-row';
}


if (data.cancelled != '') {
cls = 'red-row';
}
return cls;
}
},


Row as seen by Chrome. Note the 'yellow-row' class.

<tr class="x-grid-row yellow-row x-grid-row-selected"> ...</tr>

Am I missing a last command to apply the style? Nothing I've seen in the docs hints to this and I'd appreciate some direction.

Thanks!

[MakrelJohnson]

I've used this method, which seems to work for now:
in my column definitions I added
tdCls: 'x-specialformat-cell' on each column.

I defined a few styles:


.red-row .x-specialformat-cell {background-color: #F5C0C0;}
.yellow-row .x-specialformat-cell { background-color: #CCCCCC; }
.green-row .x-specialformat-cell { background-color: #99CC99; }

I then used my renderer as described above. Seems the tdCls did the trick. By applying it to the entire cell collection, my rows are colored as I need them with select still applying the select class which is fine for me.



...
, { header: 'startdate', width: 70, dataIndex: 'startdate', tdCls: 'x-specialformat-cell', renderer: Ext.util.Format.dateRenderer('Y-m-d') }
,{ header: 'closeddate', width: 70, dataIndex: 'closeddate', tdCls: 'x-specialformat-cell', renderer: Ext.util.Format.dateRenderer('Y-m-d') }
, { header: 'status', width: 70, dataIndex: 'status', tdCls: 'x-specialformat-cell' }
, { header: 'address', dataIndex: 'address', tdCls: 'x-specialformat-cell', flex: 1 }
, { header: 'city', dataIndex: 'city', tdCls: 'x-specialformat-cell' }
, { header: 'zip', width: 50, dataIndex: 'zip', tdCls: 'x-specialformat-cell' }
, { header: 'region', width: 50, dataIndex: '', tdCls: 'x-specialformat-cell' }

I referenced this page to get this to work: http://jsfiddle.net/molecule/tPB8Z/