ExtJS: Trying to use custom renderer for each column, scope issue - extjs

Question

so I am trying to have a custom function set as the renderer for each column, however I need to know which column is currently being rendered so I know what to do in the renderer.
I defined and extended the column and created my own custom column. I figured there I could define the custom rendering function for which it's scope would be the calling column. From there I could use this.mode, this.unit, etc. to get what information I need from the column to proceed. This isn't working out however, and I must not be understanding correctly.
Ext.define('column.Custom',
{
extend: 'Ext.grid.column.Column',
alias: 'widget.customcolumn',
listeners: {
beforerender: function(col){
//console.log(col);
}
},
gridRenderer: function(value, cell, record, row, column)
{
console.log(this);
if (record.data.StartDate == 'N/A' ||
record.data.EndDate == 'N/A')
{
cell.style = 'background:#EEE;';
return 'N/A';
}
// the locked grid has it's own renderers, so if we're here, assume we want the normalGrid
column = grid.normalGrid.columns[column];
if (column.mode == 'cool')
{
cell.style = 'background:#CCFFFF;';
//cell.style = 'background:rgb(47, 162, 223);';
}
else if (column.mode == 'heat')
{
cell.style = 'background:#FFCCCC;';
}
....etc
return ret;
}
});
And here is one of my columns.
{
// defaults
xtype: 'customcolumn',
align: 'center',
flex: 0,
width: 90,
sortable: true,
//renderer: this.gridRenderer,
lockable: false,
locked: false,
//hideable: false,
// end default
text: 'Total',
menuText: 'Total',
id: 'TotalSavingsColumn',
dataIndex: 'Total',
mode: 'none',
unit: '%',
renderer: {
fn: this.gridRenderer,
scope: this
}
},
Instead of grabbing the column by the column index, which returns the wrong column index, because of hidden columns, I want to be able to just use this.mode, this.unit, etc.
Any ideas? Thanks for the help.

Answer 1

You can define renderer function in your column.Custom class definition. If you want to set scope to column itself, you can do this in initComponent method:
Ext.define('column.Custom',
{
extend: 'Ext.grid.column.Column',
alias: 'widget.customcolumn',
initComponent: function() {
// set scope property to this, so in renderer this will refers to column itself
this.scope = this;
this.callParent();
},
renderer: function() {
console.log(this);
// your renderer...
}
});
Then you do not need to specify renderer in column config, becaus you have it defined in your column.Custom class:
{
// defaults
xtype: 'customcolumn',
align: 'center',
flex: 0,
width: 90,
sortable: true,
lockable: false,
locked: false,
//hideable: false,
// end default
text: 'Total',
menuText: 'Total',
id: 'TotalSavingsColumn',
dataIndex: 'Total',
mode: 'none',
unit: '%'
},