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

Question

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?

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

Answer 1

This is simply because you are doing it the wrong way. Nearly all sorts of config objects are only relevant at instantiation time of a class and wan't have any effect afterwards. So you need to get the view instance itself to directly change the property (method) there. To take your example from the comment you will need to write it like

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

See JSFiddle

Answer 2

According to the ExtJs Documentation for Ext.grid.View (and tested successfully by me just now!) you can provide an callback function for getRowClass within the initial viewConfig no problem!

I realize this is an older post, but you may want to consider inserting a debugger statement in your above code and stepping through the callback. You may find that something else is going wrong like perhaps you misspelled a model field name or the property has a null value when this is called.

Also from your code above it looks like you are using the grouping feature with your grid which will alter the HTML markup for this feature. So the row class might be on a deeper nester <tr> element than you are expecting! You can test this by changing your getRowClass callback function to return an easily searchable unique class name like 'this-is-a-test'.

Then go back and test again, verify with your debugger statement that the callback is being called. Then using your favourite browser developer tools, search the page source for your unique test class to see which HTML element it was actually applied to.

UPDATE: Ha, ha after typing this I realized I totally read the question too fast and you did say "after rendered". The part that annoyed me is that the accepted answer said you were "doing it wrong" which isn't necessarily true. The accepted answer is still correct for changing the entire callback function after the view has already been rendered.

However, depending on how complex each of your different callbacks is, you might still be better off not changing the whole callback anyway and changing just the criteria used within the callback. Neither way is necessarily better than the other depending on your application. If its as easy as just switching out the 'status' field with another field name, you might be better off just removing the hardcoded reference and using a variable on the view that can be changed instead of redeclaring a bunch of different callbacks and switching them in and out.