Extjs 4.0 MVC - grid column renderer function scope problem

Question

I don't understand why I can't use 'myRendInside' function for rendering a grid column. I have to use the myRendGlobal OR I can also do 'renderer: function(val) {blah blah'. 'this.myRendInside' does not get resolved.

function myRendGlobal (val, metaData, record, rowIndex, colIndex, store) {
        return val + 'abc'
        };
 Ext.define('AM.view.Event.Grid', {
        extend: 'Ext.grid.Panel',
         myRendInside: function (val, metaData, record, rowIndex, colIndex, store) {
            return val + 'xyz'
        },
        columns: [{
            dataIndex: 'name', renderer : this.myRendInside
        },
        {
            dataIndex: 'phone', renderer : myRendGlobal
        },  
        .
        .
        .

Answer 1

You can fix this by defining the columns in the constructor or the initComponent method. The method you want to assign as the renderer is not available until this point in the component life cycle.

    initComponent(){
        this.columns: [{
        dataIndex: 'name', renderer : this.myRendInside
        }
        ...
        ]
        this.callParent(arguments);        
    }