Coloring each grid cell extJS4 [duplicate] - extjs4

Question

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Color legend for grid panel in ExtJS4
I have a requirement which states that each cell in the grid can take any color out of available 8 colors based on some criteria. To implement this I have used "renderer" function in column and set tdCls of meta property to css class, but its not working. Can someone help me to resolve this.
Please find sample code below.
/** View class which contains grid panel*/
Ext.define('xxx.xxx.TestView', {
extend:'Ext.grid.Panel',
columns:[{
header:'A',
dataIndex:'a',
flex:1,
//rendering function here
renderer:function(value, metaData, record, rowIndex, colIndex, store) {
var cssClass = 'norepl';
if(value != null && value != ' ') {
var t = record.get('xxx');
t = (t.substr(2,t.indexOf('-')-2))%8;
cssClass = "replgrp"+t;
}
metaData.tdCls += cssClass; //attaching css property to tdCls of meta
return value;
}
}
});
/** available 8 css classes for coloring*/
.replgrp0 .x-grid-cell {
background-color: #f0f6ff;
color: #09d6ff;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp1 .x-grid-cell {
background-color: rgba(255, 183, 189, 0.22);
color: #900;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp2 .x-grid-cell {
background-color: #e2ffe2;
color: #090;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp3 .x-grid-cell {
background-color: rgba(255, 233, 228, 0.12);
color: #99890e;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp4 .x-grid-cell {
background-color: rgba(186, 242, 250, 0.10);
color: #1a4f99;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp5 .x-grid-cell {
background-color: rgba(255, 242, 239, 0.23);
color: #ff7f00;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp6 .x-grid-cell {
background-color: rgba(228, 224, 255, 0.7);
color: rgba(29, 7, 255, 0.60);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp7 .x-grid-cell {
background-color: rgba(255, 233, 228, 0.32);
color: rgba(255, 22, 12, 0.65);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.norepl .x-grid-cell {
background-color: rgb(255, 255, 255);
color: rgb(255, 127, 0);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
Thanks and Regards,
Nari

Answer 1

I seem to recall doing something like
renderer:function(value, metaData, record, rowIndex, colIndex, store){
if(value != null && value != ' ') {
var t = record.get('xxx');
t = (t.substr(2,t.indexOf('-')-2))%8;
cssClass = "replgrp"+t;
value="<div class="+cssClass+">"+value+"</div>
}
return value;
This is probably the wrong way to do it though :)