PDA

View Full Version : how to change the background color of a particular row of a gridpanel in extjs4 ?



abhisekhdawn
17 Apr 2012, 4:34 AM
how can i dynamically change the background color of a row depending upon some conditions ??can anyone please share some codes ?? i need it urgently....plz help..

scottmartin
17 Apr 2012, 12:42 PM
Try using the following:



.price-fall {
background-color: #FFB0C4;
color:red;
}
.price-rise {
background-color: #B0FFC5;
color:green;
}‚Äč




viewConfig: {
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
}


Regards,
Scott.

skirtle
17 Apr 2012, 10:23 PM
See here:

http://skirtlesden.com/articles/styling-extjs-grid-cells

You can't change the background-color on the TR, you need to do it on the TD.


Ext.create('Ext.grid.Panel', {
...
viewConfig: {
getRowClass: function(record) {
return record.get('age') < 18 ? 'child-row' : 'adult-row';
}
}
});


.child-row .x-grid-cell {
background-color: #ffe2e2;
color: #900;
}

.adult-row .x-grid-cell {
background-color: #e2ffe2;
color: #090;
}