How to color column elements of a GridPanel in ExtJS

This is a brief demonstration on coloring the column elements of a GridPanel in ExtJS.
Now if we want to identify the jobs having the status ‘FINISHED_FAILURE’ by coloring the status messages with red. We may proceed as follows.

var jobGrid = new Ext.grid.GridPanel({
        store: jobStore,
        frame: false,
        trackMouseOver: false,
        disableSelection: true,
        loadMask: true,        

        //*************** grid toolbar ************//
        tbar: [{
            text: 'Delete',
            iconCls: 'delete',  
            tooltip: 'Stop job if it is running and delete all job information.',
            handler:deleteJobData          
        }, '-', {
            text: 'Stop',
            iconCls: 'stop',      
            tooltip: 'Stop job if it is running.',
            handler: cancelJobData           
        },  '-',    {
            text: 'Display Errors',
            iconCls: 'error',
            tooltip: 'Display job errors.',
            handler: displayJobError             
        }, '-', {
            text: 'Refresh',
            tooltip: 'Refresh job list.',
            iconCls: 'refresh',
            handler: addJobDataToStore            
        }],        
        
          viewConfig: {
            forceFit: true
        },
         
        colModel: new Ext.grid.ColumnModel({
            defaults: {           
                sortable: true
            },
            
  //*********************** grid columns ************************//
            columns: [sm,{
                id: 'uid',
                header: "Job Uid",
                dataIndex: 'uid',
                hidden: true,
                width: 30
            }, {
                id: 'job-name',
                header: "Name",
                dataIndex: 'job_name',
                sortable : true,
                width: 100
            }, {
                header: "Details",
                dataIndex: 'details',
                sortable : true,
                width: 150
            }, {
                header: "Start Date",
                dataIndex: 'start_date',
                sortable : true,                
                width: 100
            }, {
                header: "End Date",
                dataIndex: 'end_date',
                sortable : true,
                width: 100
            }, {
                header: "Job Status",
                dataIndex: 'status',
                sortable : true,
                width: 100,
                renderer: function(value){
                    if(value == 'FINISHED_FAILURE')
                        return '' + value + '';
                    else 
                        return value;    
                }
            }, {
                header: "Progress",
                dataIndex: 'progress',
                sortable : true,
                width: 100
            },{
                header: "Error Count",
                dataIndex: 'errCount',
                sortable : true,
                width: 100
            }]
        }),       
        
        sm: sm,
        listeners : {
            beforedestroy : function(o) {

                Ext.TaskMgr.stop(o.pollerTask);
                
                return true;
            },
            rowdblclick: function(grid, rowIndex, o){
                var recs = jobGrid.getSelectionModel().getSelections();
        
                if (recs.length != 1) {
                    Ext.MessageBox.show({
                        title: 'Error',
                        msg: 'Please select one record to display errors.',
                        width: 300,
                        height: 120,
                        icon: Ext.Msg.WARNING,
                        buttons: Ext.MessageBox.OK
                    });
                } else {
                    jobErrorStore.removeAll(false);    
                    addJobErrorDataToStore(recs[0].data.uid, recs[0].data.job_name);
                    errorWin.show();             
                }
            }
            
        }
    });
150 150 Burnignorance | Where Minds Meet And Sparks Fly!