ExtJS Grid Dynamic Columns with Renderer

Question

I have a grid (ExtJS 4.2.1) with dynamic columns from server. This is working pretty well.

This is my code for reconfiguring the grid after I get my JSON fields, columns and store data from server:

var me = this,
            grid = me.getVacationView().down('[xtype=vacation.monthgrid]'),
            gridStore = grid.getStore();

        App.util.Ajax.request({
            url: '/api/holiday/GetHolidayData',
            method: 'GET',
            success: function(response, opts) {
                var obj = Ext.decode(response.responseText);
                if (obj.success) {

                    gridStore.model.setFields(obj.data.metaData.fields);
                    grid.reconfigure(gridStore, obj.data.metaData.columns);
                    gridStore.loadRawData(obj.data.storeData, false);
                }
            }
        });

In my server, I have for the column property:

newColumn.renderer = "myRender";

So that value is also in my JSON, but now I dont know where do I have to place "myRender" function so when I call:

grid.reconfigure(gridStore, obj.data.metaData.columns);

My columns get rendered correctly. (I need to fill the background of the cells depending on its value).

Any clue? Appreciate it.

Answer 1

String named renderer has to be part of Ext.util.Format. So you need:

Ext.define('App.util.Format', {
    override : 'Ext.util.Format',
    myRender : function() {}
});

If you can't override util.Format, as an alternative could be eval on "renderer" column before reconfigure.

How to write renderer to change cell value, is explained here: extjs change grid cell background based on value