Results 1 to 3 of 3

Thread: Help on background colour

  1. #1

    Default Help on background colour

    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.
    Attached Images Attached Images

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Sounds like a wasteful use of a grid panel.

    Btw, are you developing an event system?

  3. #3
    Ext JS Premium Member syscobra's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    146

    Default

    Quote Originally Posted by pachaudhary View Post
    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:

    Code:
               renderer: yourCustomRender,
    Then make your custom renderer:
    Code:
    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:

    Code:
    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:

    Code:
    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.
    Javier Rincón aka SysCobra

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •