Problem with Coloring each grid cell

[suryanarendra]

Hi,

I have a requirement which states that each cell in the grid can take any color out 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

TestView.js
---------------
Ext.define('xxx.xxx.TestView', {
extend:'Ext.grid.Panel',
'
'
'
columns:[
{header:'A', dataIndex:'a', flex:1,


renderer:function(value, metaData, record, rowIndex, colIndex, store) {
var cssClass = 'norepl';
if(value != null && value != ' ')
var t = record.get('xxx');
if(t != null) {
t = (t.substr(2,t.indexOf('-')-2))%8;
cssClass = "replgrp"+t;
}
metaData.tdCls += cssClass;
return value;
}
}
'
'
'
}

test.css
----------
.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

[suryanarendra]

If I make CSS class as " .replgrp0 .x-grid-cell-inner " then it is working.

Thanks and Regards,
Nari

[scottmartin]

Thank you for the update.

Scott.