Custom (grid) cell color from value in Store.

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:

Code:

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:

Code:

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

Code:

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.




JV



Custom (grid) cell color from value in Store.