EXTJS Grid row colour change dynamically with getting colour code from database

Question

I am working on an EXTJS grid whose row-color will be set according to a field(status field) value from the table.

User can edit the fields of the row and after clicking update, the color of the row will change according to status field value set for that row.

I need the row background color should be set fetching from a table in db.

Currently I am setting different css class with checking the status field value using following code.

getRowClass: function(record, rowIndex, rp, ds)
{
    if( record.get('status') == 'xxxxx' )
    {
        return 'status-xxxxx';
    }
    else if( record.get('status') == 'yyyyy' )
    {
        return 'status-yyyyy';
    }
    else
    {
        return 'status-zzzzzz';
    }
}

I have the color in the store with the status value for each row.

But I need the color should be fetched from db and set as row background.

Can any one help me to achieve this.

Thanks

Answer 1

If you want to use as row background-color color from row record you will have to set background color of each row td elements after row is rendered.

You can do this in refresh event of gridView. So in grid config you should define something like this:

viewConfig: {
    listeners: {
        refresh: function(view) {      

            // get all grid view nodes
            var nodes = view.getNodes();

            for (var i = 0; i < nodes.length; i++) {

                var node = nodes[i];

                // get node record
                var record = view.getRecord(node);

                // get color from record data
                var color = record.get('color');

                // get all td elements
                var cells = Ext.get(node).query('td');  

                // set bacground color to all row td elements
                for(var j = 0; j < cells.length; j++) {
                    console.log(cells[j]);
                    Ext.fly(cells[j]).setStyle('background-color', color);
                }                                       
            }
        }      
    }
}

Fiddle with live example: https://fiddle.sencha.com/#fiddle/2m8