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