Ein Blick unter die Wolkendecke
Know How 16.10.2013

ExtJS - dynamic column / grid cell styling

The styling for a grid cell can be changed depending on a value of the record. A column renderer is used to set the tdCls individually for each cell.

Ext.create('Ext.grid.Panel', {
        columns: [
            header: 'Gender',
            dataIndex: 'gender',
            renderer: function(value, meta) {
                if (value == 'm') { 
                    meta.tdCls = 'male-cell'; 
                    return 'I am male.'; 
                meta.tdCls = 'female-cell'; 
                return 'I am female.'; 


The corresponding CSS-classes would then look like:

    background-color: red;
    background-color: green;

You can find a JSFiddle to test  here .