1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    25
    Answers
    1
    Vote Rating
    0
    evilight is on a distinguished road

      0  

    Default Answered: How to set data grid's cell font color/background dynamically

    Answered: How to set data grid's cell font color/background dynamically


    In a data grid, if the content of the cell is "pass", I want to set the font to green.
    if the context of the cell is "fail", I want to set the font to red.

    I found a article about set the backgroud of cell.
    but it seems it's not dynamically, you have to set the renderer when you define the ColumnModel
    but my situation is you don't know which cell should be pass or fail before you check the database.
    this is the link I found

    http://www.sencha.com/forum/showthread.php?42750-trying-to-set-individual-cell-s-background-color-or-image-in-gridpanel


    anyone have solution for this?
    Thank you in advance

  2. In the renderer can't you just check whether it's a pass or fail and add a different class accordingly?

    Code:
    renderer: function(value, meta, record) {
        if (record.get('success') === 'pass') {
            meta.tdCls = 'pass';
        }
        else {
            meta.tdCls = 'fail';
        }
    
        return value;
    }

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,594
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    In the renderer can't you just check whether it's a pass or fail and add a different class accordingly?

    Code:
    renderer: function(value, meta, record) {
        if (record.get('success') === 'pass') {
            meta.tdCls = 'pass';
        }
        else {
            meta.tdCls = 'fail';
        }
    
        return value;
    }

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    25
    Answers
    1
    Vote Rating
    0
    evilight is on a distinguished road

      0  

    Default


    so it seems I still need more knowledge to implement this, so I'll verify this later
    thanks in advance

  5. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    25
    Answers
    1
    Vote Rating
    0
    evilight is on a distinguished road

      0  

    Default


    I add renderer in the defination of gridpanel, and I set breakpoint at renderer function, but it don't stop at all.

    Code:
        Ext.define('KWI.ui.gridpanel',{
          extend: 'Ext.grid.Panel',
          config:{
            title: 'Result' ,
            store: undefined,
            width: undefined
          },
          loadMask: true,
          disableSelection: false,
          //columns: flatColumn,  // dynamic
          closable: true,
          padding: 0,
          renderer: function(value, meta, record) {
            var newvalue;
            if (record.get('success') === 'pass') {
              newvalue = "<span style='color:red;font-weight:bold' >"+value+"</span>";
            }
            else {
              newvalue = value;
            }
            return newvalue;
          }
        });

  6. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    25
    Answers
    1
    Vote Rating
    0
    evilight is on a distinguished road

      0  

    Default


    maybe I need to and this renderer for the column....
    try now

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,594
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The renderer goes on the column, not the grid. It will then be called for each cell in that column.

    Wrapping the text in a span isn't really the right way to do it. You can set meta.tdCls to specify a CSS class to add to the td element, then it's just a case of writing suitable CSS rules in your stylesheet. The problem most people hit with writing the CSS rules is getting sufficient CSS selector specificity to overrule the default ExtJS stylesheet. There's no trick to it, you just need to understand CSS specificity and write your selectors accordingly.

  8. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    25
    Answers
    1
    Vote Rating
    0
    evilight is on a distinguished road

      0  

    Default


    Thank you, yes, it should be on the column.

    I'll check about the css solution after this

Thread Participants: 1