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

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: '%'
},