PDA

View Full Version : Grid set row color based on values in a column



pyrite
17 Jan 2011, 2:33 PM
I have one column in my grid for a product code. I want to highlight records that have incorrect product codes. I have created a CSS class for this. I just don't know how to set the class. In my column model, when I define this particular column, I have setup a renderer to test for the column values.


{
header:'MPF',
dataIndex:'f4101_imsrp2',
width: 35,
renderer: function(value){
if (value in {'C8K':'', 'C2K':''}) {
return value;
}
else {
// set class
//grid.getView().getRowClass = 'error';
//grid.getView().getRow(0).addClass('error');
return value;
}
}
},

First of all, is this the best way to do this, that is, test for a certain value in a cell, and if it resolves false, call something to change the class for the row it's in? Secondly, how do I set the row class?

florian_cargoet
17 Jan 2011, 2:46 PM
Have you tried using viewConfig ?



viewConfig: {
getRowClass: function(record, rowIndex, rp, ds){
if(the product code is correct){
return 'correct-row';
} else {
return 'incorrect-row';
}
}
}

pyrite
17 Jan 2011, 2:52 PM
How would I get the "value" from the variables record, rowIndex, rp, ds?

florian_cargoet
17 Jan 2011, 2:57 PM
Based on what I see in your code sample, I'd say :

record.get('f4101_imsrp2')

pyrite
17 Jan 2011, 3:24 PM
Great, one last thing, I am using the (value in {}) array method, how can I do not in array?


getRowClass: function(record, rowIndex, p, store) {
var code = record.get('f4101_imsrp2');
if (code in {'':'', 'C2K':'', 'C78':'', 'C8K':''}) {
return '';
} else {
return 'error';
}
},

I tried doing if (code not in {..., but it didn't understand the "not", I also tried putting a ! before the code, to no avail.

florian_cargoet
17 Jan 2011, 3:49 PM
! ( /* condition */ )

Are you familiar with JavaScript? If not, you may want to get more comfortable with it before diving into Ext JS.

pyrite
17 Jan 2011, 3:59 PM
Thanks!

And yes, I am familiar with it, it just escaped me to put an extra set of parens around the expression. I am new however to ExtJS (obviously). I kept thinking of the SQL expression "NOT IN ()". Anyway, thanks, I got it all working now.