PDA

View Full Version : Row Color Coding in ExtJs Grid.



jackjones2010
22 Mar 2011, 7:47 PM
Good day!

Is there any way to color code grid row results, like calculating column1 + column2 + column 3 then

it's result font color is "RED"

The Code:
Ext.ux.grid.GroupSummary.Calculations['Scoretotal'] = function(v, record, field){
var a = record.data.wrate;
var b = '.'+record.data.ctvalue;
return Ext.util.Format.round(v + (a * b),2);
};
// utilize custom extension for Hybrid Summary
var summary = new Ext.ux.grid.HybridSummary();

var gridScore = new Ext.grid.EditorGridPanel({
iconCls : 'icon-grid',
renderTo : 'summaryofscores',
frame : true,
width : 830,
height : 180,
clicksToEdit : 1,
animCollapse : false,
trackMouseOver : false,
plugins : summary,
items : [
{
xtype : 'box',
html : ' ',
width : 1
},
{
xtype :'fieldset',
xtype : 'box',
html : '<div align="justify">&nbsp;&nbsp;&nbsp;<b>PART III:</b></div>'
},
{
xtype : 'box',
html : '&nbsp;',
width : 1
}
],
ds: new Ext.data.GroupingStore({
reader : reader,
// use remote data
proxy : new Ext.data.HttpProxy({
url : 'scripts/ajax/evaluation.php?_class=evaluation&_method=showSummary',
method : 'POST'
}),
sortInfo : {field: 'ctid', direction: 'ASC'},
groupField : 'grouptype'
}),
columns: [
{
header : 'pcode',
width : 80,
dataIndex : 'grouptype',
hideable : false,
},
{
id : 'summaryremarks',
header : 'SUMMARY OF SCORES',
width : 80,
dataIndex : 'summaryremarks',
},{
header : 'Weighted Ratings',
width : 20,
dataIndex : 'wrate',
},{
header : 'Weights',
width : 20,
dataIndex : 'ctvalue',
renderer : function(v, params, record){
return record.data.ctvalue + '%';
},
},{
header : 'Score',
id :'score',
width : 20,
dataIndex : 'score',
renderer : function(v, params, record){

var b = '.'+record.data.ctvalue;
return Ext.util.Format.round(record.data.wrate * b ,2);
},
summaryType : 'Scoretotal',
summaryRenderer : function(v, params, record){
return Ext.util.Format.number(v,'0.0');
},
}
],

view: new Ext.grid.GroupingView({
forceFit : true,
showGroupName : false,
enableNoGroups : false,
enableGroupingMenu : false,
hideGroupedColumn : true
})
});
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

gridScore.on('afteredit', function(){
var groupValue = 'Ext Forms: Field Anchoring';
summary.showSummaryMsg(groupValue, 'Updating...');
setTimeout(function(){ // simulate server call
// HybridSummary class implements updateSummaryData
summary.updateSummaryData(groupValue,
// create data object based on configured dataIndex
{summaryremarks: 22, wrate: 888, ctvalue:99, score:99});
}, 2000);
});

// load the remote data
gridScore.store.load();

(Note: Data on this Grid is from firebird database. Thanks in Advance!)

tryanDLS
24 Mar 2011, 6:14 AM
http://extjs.com/learn/Ext_FAQ_Grid

http://sencha.com/learn/Ext_Forum_Help#How_to_post_code_properly

kohyea
25 Mar 2011, 7:01 PM
Why not using view.getRowClass ?

Kohyea