How to Change the getRowClass function on an ExtJS GridPanel viewconfig After Render

[frugardc]

I have an Ext.grid.Panel with a function that returns a custom class that is used to color code rows in the grid by overriding the getRowClass function. This works great, but I would like to give the user the option to change the criteria by which the grid is colored. The below example, I am coloring by the "severity" attribute, but I would like to change that to "status", for example. Is there a way I can dynamically change the getRowClass function,or maybe the entire viewconfig on the grid, and have the grid recolor, after the grid has already been rendered?
</span>

    alarmsGrid = Ext.create('Ext.grid.Panel', 
{    title: 'Netcool Alarms', 
   id: 'Netcool Alarms', 
   columnLines: true, 
   store: alarms_store,
    loadMask: true, 
   stripeRows: true, 
viewConfig: { 
         getRowClass: function(record, rowIndex, rowParams, store){ 
                   return record.get('severity').toLowerCase(); 
       } 
   },

Note:

alarmsGrid.viewConfig.getRowClass = function(record, rowIndex, rowParams, store){ return record.get('status').toLowerCase(); }

seems to have no effect

[mitchellsimoens]

I would use a single field and then change the value of that field. Once you do that, the grid will refresh the view and execute the configured getRowClass method.

[skirtle]

The viewConfig is used to configure the grid's view, which is a separate child component of the grid. The docs for it are here (notice getRowClass):

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.View

Once the grid has been instantiated the viewConfig is irrelevant, you need to work with the grid's view directly instead. You can change the function getRowClass on the view but if you just want to change the field it uses then you'd be better off just storing the field name on the view and reading that in from getRowClass:

rowClsField: 'severity',

getRowClass: function(record) {
    return record.get(this.rowClsField).toLowerCase();
},

setRowClsField: function(field) {
    this.rowClsField = field;
    this.refresh();
}

Here this will be the grid view.

To do the update you'd then do something like:

grid.getView().setRowClsField('status');