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