15 февр. 2011 г.

Изменяем цвет строки в Grid


you can use the GridView class (Ext.grid.GridView) to manipulate the user interface of the grid.
You can also the viewConfig property of the GridPanel. Here is an example:

viewConfig: {
        //Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    }

ps: Example taken from ExtJS API documentations itself

The price-fall and price-rise are CSS that have background colors set accordingly. eg:

.price-fall { 
 background-color: #color;
}
.price-rise {
 background-color: #color;
}






You can do it by using the getRowClass method of GridView (see Ext JS API).

Quoted example from API documentation:

viewConfig: {
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, 
                         //full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds){ 
 // rp = rowParams
        if(this.showPreview){
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    }
},


src : how can i change the row colour in datagrid based on severity