ExtJS column renderer not getting called

Question

I can't figure out why my customer renderer for my grouped-column grid isn't being called.

Ext.define('PT.view.deal.YearCol', {
    extend: 'Ext.grid.column.Column',
    alias: 'widget.yearcolumn',
    columns: [
        {   
            text: 1,
            renderer: function(v, m, r) { 
                console.log('renderer called');  // THIS IS NEVER CALLED!!!!!!!!
                return custom(r);
            }
        },
            ...
    ]
});

Ext.define('PT.view.deal.QuarterlyGrid', {
    extend: 'Ext.grid.Panel',

    columns: [
        { 
            text: 'Item Number', 
            dataIndex: 'Item_Number'
        },
        {
            xtype: 'yearcolumn',
            text: 2013
        },
        ...
    ]
});

The grid columns/headers are displayed correctly, but the grid data isn't rendered. Why is that function not being called?

Evan Trimboli Evan Trimboli · Accepted Answer · 2013-09-19T23:36:24

What version are you using? This works ok for me in 4.2.0:

Ext.define('PT.view.deal.YearCol', {
    extend: 'Ext.grid.column.Column',
    alias: 'widget.yearcolumn',
    columns: [{
        text: 1,
        renderer: function(v, m, r) {
            return r.get('foo');
        }
    }]
});

Ext.define('Grid', {
    extend: 'Ext.grid.Panel',

    columns: [{
        text: 'Item Number',
        dataIndex: 'Item_Number'
    }, {
        xtype: 'yearcolumn',
        text: 2013
    }]
}); 

Ext.onReady(function() {

    new Grid({
        width: 200,
        height: 200,
        renderTo: document.body,
        store: {
            fields: ['Item_Number', 'foo'],
            data: [{
                Item_Number: 1,
                foo: 2
            }]
        }
    });

});

ExtJS column renderer not getting called

1 Answers