How can I change the row colour in datagrid based on severity?

master123 picture master123 · Feb 15, 2011 · Viewed 25.3k times · Source

How can I change the row colour in datagrid based upon the severity condition? I'm new to this EXTJS topic. I used to reader to read, store to store and writer to write the data. After fetching all the data into the grid, how can i change the row colour in datagrid based upon the severity condition? Can you explain me too bit with code working?

Answer

Abdel Raoof picture Abdel Raoof · Feb 15, 2011

you can use the GridView class (Ext.grid.GridView) to manipulate the user interface of the grid. You can also the viewConfig property of the GridPanel. Here is an example:

viewConfig: {
        //Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    }

ps: Example taken from ExtJS API documentations itself

The price-fall and price-rise are CSS that have background colors set accordingly. eg:

.price-fall { 
 background-color: #color;
}

.price-rise {
 background-color: #color;
}