Hi,
I have a gridPanel and that uses a CSS class to render background color for one of the columns, I want to change the color based on some conditions. I have tries using the CSS class provided by EXTJS (Ext.util.CSS.updateRule and Ext.util.CSS.getRules) but I am not able to see the colours getting applied, so can some one please suggest me how to get this thing working.
I have attached a screen shoot of my grid for you to have a better understanding.
Regards,
Pankaj.
I think you can do this with a custom render for the grid cell.
So when you make the column model of the grid (in the column you want to custom render the background) you put this option:
renderer: yourCustomRender,
Then make your custom renderer:
function yourCustomRender(value, p, record){
if (record.type == 'clear') {
cssColor = '#clearcolor';}
if (record.type == 'informational') {
cssColor = '#informationalColor';}
if (record.type == 'warning') {
cssColor = '#warningColor';}
if (record.type == 'minor') {
cssColor = '#minorColor';}
if (record.type == 'major') {
cssColor = '#majorColor';}
if (record.type == 'critical') {
cssColor = '#criticalColor';}
return String.format(
'<div style="backgrond-color:'.cssColor.';"{0}</div>',
value);
}
Of course you must have a column with the "type" of css you want to have for that column. Or you just can make a function or the operations to obtain what type of column you want. (For example if the type of background comes from a date comparision with the current date, you must have a function to return the cssColor because of the date). In that case you must do a function like this one:
function typeColorFromDate (date) {
//... calculate for example the current date - the date entered and receive a number to get the csscolor based on that
return colorFromDateOperation;
}
So the function gets this way now:
function yourCustomRender(value, p, record){
cssColor =typeColorFromDate(record.theDateToCalculate);
return String.format(
'<div style="backgrond-color:'.cssColor.';"{0}</div>',
value);
}
Hope that helps you or bring it some idea of another aproach for that.