Color legend for grid panel in ExtJS4

Question

I have a requirement that each cell in the grid can take any color out of available 8 colors based on some criteria. After that I need to show a color legend of those 8 colors a

Answer 1

I've had to do something similar.

I applied a "color" class to the cell based on the value using the column's renderer config.

In my case the value determined the color of the cell.

Here is the renderer:

// ... other column configs
renderer: function(value, meta, record) {
    switch(value) {

        case 1 : 
            meta.tdCls = 'orange-cell';
            break;

        case 2 : 
            meta.tdCls = 'light-orange-cell';
            break;

        case 3 : 
            meta.tdCls = 'green-cell';
            break;   
    }

    // I only had a color in my cell without any kind of value
    // so didn't include the following return statement. I added it here
    // just so you would know that you can have it also.
    return value;
}

The CSS classes looked like this:

.orange-cell {
    background-color: #ffbb22 !important;
}
.light-orange-cell {
    background-color: #33cc55 !important;
}
.green-cell {
    background-color: #ffeecc !important;
}

This is working fine with ExtJS 4.1.0

Answer 2

Add something like that to your grid definition:

viewConfig: {
  getRowClass: function(record, rowIndex, rowParams, store){
    return record.get("valid") ? "row-valid" : "row-error";
  }
}

See http://docs.sencha.com/ext-js/4-0/#!/api/Ext.view.Table-method-getRowClass for more details.

Note: That would work for individual rows. Do you really need cell-by-cell coloring?