根据数据库值extjs4.2更改记录的颜色

Question

I'm trying to change the records background color based on a field value in my database table, however i'm not being successful in doing that. Any idea what could be preventing this change? Name of the field in my database is STATUS.

  grid = new Ext.grid.GridPanel({
                        region:'center',
                        store: gridStore,
                        cm: colModel,
                        stripeRows: true,
                        sm: _selctionModel,
                        bbar:paging,
                        viewConfig:
                        {
                            forceFit: true,
                            headersDisabled:false,
                            stripeRows: false, 
                            getRowClass: function(record) { 
                                return record.get('STATUS') == 'OP' ? 'child-row' : 'adult-row'; 

                            } 
                        },

CSS:

.child-row .x-grid-cell-inner{
    background-color:red;
    color:red;
}

.adult-row .x-grid-cell-inner{
    background-color:blue;
    color:blue;
}

please note that putting:

.x-grid-cell-inner{
        background-color:blue;
        color:blue;
    }

will change the background color.

Answer 1

Have you tried to use a render on your grid panel? You also can try to use a tpl in this case. The status value can be used in a render function to return different values of the rows. Setting style properties you should solve your problem.

Answer 2

you can try this

{
    xtype: 'gridcolumn',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        metaData.tdCls = (value=="OP")?'adult-row':'adult-row';
        return value;
    },
    dataIndex: 'status',
    text: 'STATUS'
}