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.


xt.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 .