Change cfgrid (html) cell color based upon data

Question

I would like to change the color of a cell based upon a status condition in cfgrid.

For example:

1. If the status of a record is Overdue, the cell will become red with OverDue in bold.
2. If the status of a record is Due (within 30 days), the cell will become yellow with Due in bold.
3. If the status of a record is Current (date due over 30 days), then the cell will be green with Current in bold....

I could only find rendering for cfgridrow and cfgridcolumn.

Answer 1

You should resort to the column renderer property provided by ExtJS. A renderer for a column gets three arguments, the second is a meta object on which you can set a property called attr which gets set as attribute on the cell dom element. You can provide some css styling for the cell for example:

var renderer = function(value, meta, record){
    if(value == "Overdue") { meta.attr = 'style="color:red;font-weight:bold"'; }
    if(value == "Due") { meta.attr = 'style="color:yellow;font-weight:bold"'; }
    if(value == "Current") { meta.attr = 'style="color:green"'; }
    return value;
}

Check setRenderer in the Ext.grid.ColumnModel documentation

Answer 2

I use something similar to your need for column in grid to display expiration date:

{
 header:    'Expiration Date',    
 dataIndex: 'ExpireDate',
 renderer:  function (value, metaData, record, rowIndex, colIndex, store) {

     if ( record.get ( 'ExpireDate' ) < new Date ( ).clearTime ( ) ) {
       metaData.css += ' y-grid3-expired-cell';
       value = '';    
     }
     if ( record.get ( 'ExpireDate' ).format ('m/d/Y') == '12/31/9999' ) {
       metaData.css += ' y-grid3-non-expired-cell';
       value = '';
     }        
     value = (value == '') ? '' : record.get ('ExpireDate').format ('m/d/Y');
   }      
   return value;    
 }

},

using css classes is more robust solution, my clases are defined like this:

.y-grid3-expired-cell {
  background:         #AA0000;
} 

.y-grid3-non-expired-cell {
 background:         #00AA00;
}

only what you need to do is add your own logic and styles...