PDA

View Full Version : change row color in a grid according to a value



dobberph
27 Aug 2012, 4:14 PM
Hi all,

I tried many options I found in google, but nothing worked.
The actual try is over the following:


viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store) {
if (record.get('bezahlt')==='ja' && record.get('gewicht') > 0) return 'rowBezahltUndGewogen';
else if (record.get('bezahlt')==='ja') return 'rowBezahlt';
else if (record.get('bezahlt')==='nein') return 'rowUnbezahlt';
}
}



.rowBezahlt {
background-color: #81F781 !important;
color:white;
}
.rowUnbezahlt{
color:red;
}
.rowBezahltUndGewogen{
background-color: #088A08 !important;
color:white;
}

But this results in no background-change. The foreground color changed!
The <tr> has the css-classes: x-grid-row and rowBezahltUndGewogen (As it should), but:
the underlying <td> still has the classes x-grid-cell x-grid-cell-numbercolumn-1025 x-grid-cell-first, where x-grid-cell overwrites background-color to the extjs-standard.

Does anyone knows how to get this work?

Thanks,
Tobias

vietits
27 Aug 2012, 5:25 PM
Try this:


.rowBezahlt .x-grid-cell{
background-color: #81F781 !important;
color:white;
}
.rowUnbezahlt .x-grid-cell{
color:red;
}
.rowBezahltUndGewogen .x-grid-cell{
background-color: #088A08 !important;
color:white;
}

scottmartin
27 Aug 2012, 7:00 PM
Here is an excellent posting for coloring grids:
http://skirtlesden.com/articles/styling-extjs-grid-cells

Scott.

dobberph
28 Aug 2012, 1:16 AM
Thanks a lot. If I change the css to this with the same code I use above it works.
This is because then the background-color of each single cell will be overwritten also.


.rowBezahlt .x-grid-cell {
background-color: #81F781 !important;
color:white;
}
.rowUnbezahlt .x-grid-cell {
}
.rowBezahltUndGewogen .x-grid-cell {
background-color: #088A08 !important;
color:white;
}


Thanks to vietits. I saw your posting too late ;D