Partially setting text colour within an ExtJS grid cell

Question

I have a ExtJS 4.2 grid column (as part of a PHP MVC 3 website) relating to status of a set of processes for items. This column returns a string of three-letter abbreviations per process that has been completed, separated by spaces, for example Was Pre Cut would be an item that had been Washed, Prepared and Cut, and Was Scr Pee would be an item that had been Washed, Scrubbed and Peeled.

However, the desired functionality would be to retrieve all the processes, and style each entry to show whether it had been completed; en example would be <green>Was Pre</green> Cut would denote an item that has been washed and prepared but not cut.

Is this possible? Is this something where I pass the values and corresponding style formats per process as an array object instead of a string, and generate the desired formatting via the cell's renderer, or am I being optimistic about the capability of a grid column's renderer?

Answer 1

A column renderer gives you a runtime that output HTML, you could hardly overestimate the capabilities of that...

I am not sure I completely understand your problematic, but here's a starter example. Given a list of possible processes, it displays all processes for each records, and highlight the processes that are flagged for this record (example fiddle):

var processes = ['Foo', 'Bar', 'Baz', 'Bat']; // all available processes

new Ext.grid.Panel({
    renderTo: Ext.getBody()
    ,width: 400
    ,height: 200
    ,forceFit: true

    ,store: {
        fields: ['id', 'status', 'statusDetails']
        ,data: [
            {id: 1, status: 'Foo Bar', statusDetails: ['Foo', 'Bar']}
            ,{id: 2, status: 'Bar Baz', statusDetails: ['Bar', 'Baz']}
            ,{id: 3, status: 'Baz Bat', statusDetails: ['Baz', 'Bat']}
        ]
    }

    ,columns: [{
        dataIndex: 'id'
        ,text: "ID"
        ,width: 40
    },{
        dataIndex: 'status'
        ,text: "Status"
        ,renderer: function(value, md, record) {
            md.tdCls = 'processes-cell'; // gives us a hook for CSS
            return Ext.Array.map(processes, function(process) {
                var statusDetails = record.get('statusDetails');
                // possible alternative:
                // var statusDetails = record.get('status').split(' ');
                return '<div class="process ' + process + ' '
                + (statusDetails.indexOf(process) !== -1 ? 'on' : 'off')
                + '">' + process
                + '</div>';
            }).join('');
        }
    }]
});

And style that to your heart's content. For example:

.processes-cell .process {
    display: inline-block;
    width: 25%;
    text-align: center;
    border: 1px solid white;
}
.processes-cell .process.off {
    background-color: lightpink;
}
.processes-cell .process.on {
    background-color: lightgreen;
}
.processes-cell .x-grid-cell-inner {
    padding: 1px;
}

Answer 2

Ha yep rixo beat me to it. He is right you need to work with the renderer property for your column. I created a fiddle as well in case you might need to see another example: https://fiddle.sencha.com/#fiddle/872