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:
ps: Example taken from ExtJS API documentations itself
The price-fall and price-rise are CSS that have background colors set accordingly. eg:
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
Quoted example from API documentation:
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