I've used this method, which seems to work for now:
in my column definitions I added
Code:
tdCls: 'x-specialformat-cell'
on each column.
I defined a few styles:
Code:
.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.
Code:
...
, { 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/