View Full Version : Custom (grid) cell color from value in Store.

17 Sep 2014, 5:30 PM
Hello experts,

I am new to ExtJS. I am populating a Grid (Ext.grid.Panel) with values from a Store. The Store gets the values from a backend system. There are values in the Store that have color (in RGB ), the colours should be used as background color in certain cell, for example:

Ext.define('AM.store.Indicators', {
extend: 'Ext.data.Store',
model: 'AM.model.Indicators',

data: [
{plant: 'Plant1', tolerance: '1500', toleranceColor: 'FF8080'},
{plant: 'Plant2', tolerance: '1300', toleranceColor: '000000'},

Where in the Grid, should be a Column with the "tolerance" values, and each background color of that cell's column, should be equal to the RGB value in field "toleranceColor".

The field "toleranceColor" comes from the backend system and can't (and shouldn't) be calculated in the view. Also the tolerances between Plants vary, so several plants may have the same "tolerance" value, but different "toleranceColor", based on business logic, I have seen examples where in the column renderer, according to the "val" parameter passed to the renderer function, the color can be calculated, like this:

function change(val){
if(val > 0){
return '<div class="x-grid3-cell-inner" style="background-color:#B0FFC5;"><span style="color:green;">' + val + '</span></div>';
}else if(val < 0){
return '<div class="x-grid3-cell-inner" style="background-color:#FFB0C4;"><span style="color:red;">' + val + '</span></div>';
return val || 0;

This is not my case, since the "toleranceColor" might change from column to column without any thing to do with the "tolerance" value that actually populates the cell.

I haver tried the following, but when I do it, the grid stops rendering, I must be calling the "toleranceColor" in the wrong way.

This is what I have done in the view, at the column definition

Ext.define('AM.view.dashboard.MainView', {
extend: 'Ext.grid.Panel',
columns: [{
text : 'Tolerance',
flex : 1,
sortable : true,
dataIndex : 'tolerance',
renderer : function(val){
return '<div class="x-grid3-cell-inner" style="background-color:#' + toleranceColor + ';"><span style="color:black;">'+ val + '</span></div>';

I can't seem to find how to read the corresponding "toleranceColor" from my store, please, any tips and advice will be appreciated.

Thanks in advance.


17 Sep 2014, 11:10 PM

renderer can get record and metaData.

renderer: function(val, metaData, record) {
metaData.tdAttr = 'bgcolor=#' + record.get('toleranceColor');
return val;
will work fine.

18 Sep 2014, 6:25 AM
Hi, thank you very much, that was exactly what I was looking for, your code didn't work as stated, but your answer certainly pointed me in the right path to solve it. Here is the working code:

renderer : function(val, metaData, record){
metaData.style = 'display:block; background-color:#' + record.get('grMpColor')+';';
return val;

Thank you so much, I was getting frustrated!

Best regards!

18 Sep 2014, 4:45 PM
Hi Jesus, thank you for pointing out.

Sorry tdAttr is obsolete attribute...
Your code is right.