Render Grid Row Without Updating CSS File

Question

I can render individual grid columns using a column renderer like this ;

renderer: function(val, meta) {
    if (val === 'i') {
        meta.style = "background-color:#86b0f4;";
    }else if (val === 'n') {
        meta.style = "background-color:#fcd1cc;";
    }
    return val
},

I would like to use this same idea on grid rows.

Unfortunately the only thing I can come across is something along the lines of :

viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store){
        return record.get("partytype") == 6 ? "row-highlight" : "";
    }
},

This requires me to update the CSS file which I do not want to do.

Can I directly manipulate the css value on a grid row in extjs?

score 0 · Answer 1 · edited May 23 '17 at 11:52

The meta parameter in the column renderer has a record property too. You could lookup the relevant value there instead of relying on the cell value parameter and then add a reference to the same method for each column in the configuration.

Avoiding code duplication, the renderer method could be declared anywhere but to keep this example concise I've just used an IIFE / inline declaration.

{
    // Ext.grid.Panel
    // ...
    columns: (function(){
        function columnRenderer(cellValue, meta){
            var value = meta.record.get('value');
            if(value === 'i')
                meta.style = 'background-color:#86b0f4;';
            else if(value === 'n')
                meta.style = 'background-color:#fcd1cc;';
            return cellValue;
        }
        return [
            {
                text: 'Foo',
                dataIndex: 'foo',
                renderer: columnRenderer
            },
            {
                text: 'Bar',
                dataIndex: 'bar',
                renderer: columnRenderer
            }
        ];
    })()
}

» Fiddle

Render Grid Row Without Updating CSS File

1 Answers1