How do I customize a report cell based on value?

SCC.common.BufferDetailBOHReportPlugin = {

  init: function(report){
    report.renderers = report.renderers || {};
    report.renderers['BufferDetail$OnHand']= function(value, meta, record) {
      var cssClass = '';
      var issueState = record.get("Undefined$IssueState");
      if(issueState==='ON') {
        cssClass = 'bufferOnHand';
        return "<div id='"+cssClass+"' class='"+cssClass+"'>" + value +"</div>";
      } else {
        return value;
      }
    }
    this.report = report;
    report.on({
      'filterscreated': this.onFiltersCreated,
      'overlaycreated': this.onOverlayCreated,
      'columnconfig' : this.onColumnConfig,
      'gridconfig' : this.onGridConfig,
      'bbarconfig' : this.onBottomToolbarConfig,
      scope: this
    });
  }

}

Here's an alternate solution using the metadata parameter of the Ext.grid.Column.renderer function. metadata allows you to set a CSS class that applies to the entire grid cell:

MOD.ReportPlugin = {
  init: function(report) {
    report.setRendererByName('MOD$Model$Column', function(value, metadata, rec) {
      if(value > 0) {
        metadata.css = 'value-positive';
      }
      else if(value < 0) {
        metadata.css = 'value-negative';
      }
      else {
        metadata.css = 'value-neutral';
      }

      return value;
    });
  }
};

plugin (also define rule in css)

// add define for require.js
MyReportPlugin = Ext.extend(Object, {
  init: function() {
    report.on({columnConfig: this.onColumnConfig});
  }
,onColumnConfig(report, columns) {
  // loop for your column
  column.renderer = function(value, metaData, record, rowIndex, colIndex, store) {
    // adds your css tag to the the cell
    metaData.css = "noticeable-column-cell";
    return value;
  }
}
});