Jobs
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:

.male-cell{ 
    background-color: red;
 
.female-cell{ 
    background-color: green;
}

You can find a JSFiddle to test  here .

Zurück