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

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. Afte开发者_StackOverflowr 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?

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;
}

You can do it by using the getRowClass method of GridView (see Ext JS API).

Quoted example from API documentation:

viewConfig: {
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
        if(this.showPreview){
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    }
},

You could use a renderer for your column from your column model and then assign a css class like this:

so, the customRenderer function:

`

function customRenderer(value, metaData, record, rowIndex, colIndex, store) {
    var opValue = value;
    if (value === "Rejected") {
        metaData.css = 'redUnderlinedText';
    } else if (value === "Completed") {
        metaData.css = 'greenUnderlinedText';
    } else if (value === "Started") {
        metaData.css = 'blueUnderlinedText';
    }
    return opValue;

}`

And then your column:

        {
            header: 'Your Column Header',
            dataIndex: 'your_data_index',
            renderer: customRenderer
        }

Then your css could be like this:

.redUnderlinedText {
    background-color: blue,
    color: red;
    text-decoration: underline;
    cursor: pointer;
}