PDA

View Full Version : Help on background colour



pachaudhary
27 Apr 2009, 4:07 AM
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.

jay@moduscreate.com
27 Apr 2009, 4:33 AM
Sounds like a wasteful use of a grid panel.

Btw, are you developing an event system?

syscobra
27 Apr 2009, 6:07 AM
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.