extjs4 row styling

Question

I have conditional styling on grid rows, styling works initially but it does not respond to data change. Lets say if you edit a column to be a minus value lets say then I want its style change back to red.

I tried

grid.doLayout();
grid.doComponentLayout();
grid.update();
grid.updateLayout()

so how I can enforce grid to update the css on the row (how do I trigger getRowClass, or is there any other way of doing this).

Answer 1

What you are trying to do will only be possible if you run reconfigure with the same columnmodel on the grid. override the getRowClass property of the view cause the grid.Panel itself has none.

gridReference.getView().getRowClass = function(record, rowIndex, rowParams, store){ 
     // your code 
}

See the JSFiddle example for this

Alternatively you may use the renderer

Use the renderer but this time you change the meta data of the cell by adding a class. This can be done by modifing the second param of the renderer which is a meta-object like so:

var classRenderer = function(v,m) { 
    if (v=='Lisa') { 
        m.tdCls = 'demo' 
    } 
    return v; 
}

here'S a JSFiddle in addition

Answer 2

You can use the renderer config for the column...

 function change(val) {
    if (val > 0) {
        return '<span style="color:green;">' + val + '</span>';
    } else if (val < 0) {
        return '<span style="color:red;">' + val + '</span>';
    }
    return val;
}

   function pctChange(val) {
    if (val > 0) {
        return '<span style="color:green;">' + val + '%</span>';
    } else if (val < 0) {
        return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
}

   // create the Grid
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    collapsible: true,
    multiSelect: true,
    stateId: 'stateGrid',
    columns: [
        {
            text     : 'Company',
            flex     : 1,
            sortable : false,
            dataIndex: 'company'
        },
        {
            text     : 'Price',
            width    : 75,
            sortable : true,
            renderer : 'usMoney',
            dataIndex: 'price'
        },
        {
            text     : 'Change',
            width    : 75,
            sortable : true,
            renderer : change,
            dataIndex: 'change'
        },
        {
            text     : '% Change',
            width    : 75,
            sortable : true,
            renderer : pctChange,
            dataIndex: 'pctChange'
        },
        {
            text     : 'Last Updated',
            width    : 85,
            sortable : true,
            renderer : Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex: 'lastChange'
        }
          ],
 height: 350,
    width: 600,
    title: 'Array Grid',
    renderTo: 'grid-example',
    viewConfig: {
        stripeRows: true,
        enableTextSelection: true
    }
});