ExtJs gridPanel Dynamic Cell Background colour from Record.Data

Question

I'm working with ExtJs 4.2 in PHP, creating a grid with a Store that reads information from a SQL DB to populate the rows. One of the columns relates to the status of the row (open, closed etc.), and another relates to a hexadecimal colour value that in previous code was applied to the background colour of the table cell.

I've read about using the renderer config option on the related column to apply a CSS class (both in a separate CSS file and as raw text) that contains the desired colour, but I'm working off specific colours that are retrieved as part of a row's data.

I thought code for a column along the lines of below would work, but it doesn't.

How would I get this functionality? Many of the examples are using "if" logic to determine the colour to render, but I only need to render the one colour that is supplied in the data from the store. Having a list of classes isn't desirable, as these colours could change in the database, or new statuses could be added; it would be preferable to call the colour value from the data.

{text: "Status",
 sortable: true,
 width:100,
 dataIndex: 'Status',
 renderer: function(value, meta, record){
                    meta.attr = 'style="color:#'record.data.StatusColour'"';
                    return value;
    }
}

EDIT:

Ext.onReady(function(){
    //Define the model
    Ext.define('CaseModel', {
        extend: 'Ext.data.Model',
        proxy: {
            type: 'ajax',
            reader: 'json'
        },
        fields: [
            'Id',
            'Project',
            'Status',
            'StatusColour',
        ]
    });

    // create the Data Store
    var caseStore = Ext.create('Ext.data.Store', {
        model: 'CaseModel',
        autoLoad: true,
        proxy: {
            // load using HTTP
            type: 'ajax',
            url: '<?= $site_url ?>Case/JSON/All',
            reader: {
                type: 'json',
                model: 'CaseModel',
                root: 'data'
            }
        },
        remoteSort: true,
        pageSize: 20
    });

    //Render grid
    Ext.create('Ext.grid.Panel', {
        width: 800,
        store: caseStore,
        title: 'Cases',
        columns: [
            {text: "ID", sortable: true, width: 25, dataIndex: 'Id'},
            {text: "Project", sortable: true, width: 100, dataIndex: 'Project'},
            {text: "Status", sortable: true, width:100, dataIndex: 'Status'
            // renderer goes here
            /*
            , renderer: function(value, meta, record) {
                meta.style = 'background-color: ' + record.get('StatusColour');
                return value;
            }
            */
            },
            {text: 'Details', xtype: 'templatecolumn', width: 50, tpl: '<a class=\"link_btn\" href=\"<?php echo site_url()?>Case/View/{Id}\">Open</a>'}
        ],
        renderTo: Ext.get('CaseGrid'),
        dockedItems: [{
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            itemId: 'PagingToolbar',
            displayInfo: true,
            store: caseStore
        }],
        features: [
            {ftype: 'grouping'}
        ]
    });
});

//Sample JSON data
{
    "total":"17",
    "data":
    [
        {"Id":"64","Project":"test case 1","Status":"New","StatusColour":"ffffff"},
        {"Id":"49","Project":"fgdfgdfgdfg","Status":"New","StatusColour":"ffffff"},
        {"Id":"65","Project":"test case 2","Status":"New","StatusColour":"ffffff"},
        {"Id":"50","Project":"abc","Status":"New","StatusColour":"ffffff"},
        {"Id":"51","Project":"aaaa","Status":"New","StatusColour":"ffffff"},
        {"Id":"67","Project":"test case 4","Status":"New","StatusColour":"ffffff"},
        {"Id":"52","Project":"fffffff","Status":"New","StatusColour":"ffffff"},
        {"Id":"37","Project":"ghfdgh","Status":"New","StatusColour":"ffffff"},
        {"Id":"53","Project":"ddddddddd","Status":"New","StatusColour":"ffffff"},
        {"Id":"29","Project":"Suppress 0 value line items to SOP","Status":"Open","StatusColour":"6dce6d"},
        {"Id":"66","Project":"test case 3","Status":"Open","StatusColour":"6dce6d"},
        {"Id":"16","Project":"Egress locks","Status":"Postponed","StatusColour":"cd7ddb"},
        {"Id":"63","Project":"Public Comment2","Status":"Duplicated","StatusColour":"bf6161"},
        {"Id":"30","Project":"Nominal codes for Stock items","Status":"Duplicated","StatusColour":"bf6161"},
        {"Id":"17","Project":"Details missing","Status":"Closed","StatusColour":"777777"},
        {"Id":"18","Project":"Non-standard finish not priced","Status":"Closed","StatusColour":"777777"},
        {"Id":"19","Project":"POA and VAT Rate","Status":"Closed","StatusColour":"777777"}
    ]
}

matt matt · Accepted Answer · 2013-10-31T16:02:15

Refer to the docs, the renderer's parameter "meta" supports the following properties: tdCls, tdAttr, and style.

So in your case, style would be suitable:

{
    text: "Status",
    sortable: true,
    width: 100,
    dataIndex: 'Status',
    renderer: function(value, meta, record) {
        meta.style = 'background-color: #' + record.get('StatusColour');
        return value;
    }
}

ExtJs gridPanel Dynamic Cell Background colour from Record.Data

1 Answers