PDA

View Full Version : How to: Style Grid Row (background color)



SchattenMann
20 Aug 2009, 6:56 AM
hi all

i've been fighting with this for some time now. i haven't been able to find any live example with a grid background dynamically defined according to some row value. anyway i've found some similar threads and go this:



this.getView().getRowClass = function(record, index){

return (record.data.anulado == 1 ? 'blue-row' : '');

};


this works on grid onRender() but that's not what i want because it needs to listen for the store.load to any row changes.

so i tried using it on viewConfig like in the sample (http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridView&member=getRow) but without success.

it seems to be something related to the use of RowExpander plugin...

my actual view :



,viewConfig: new Ext.grid.GroupingView({
forceFit:true
,groupTextTpl:'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Intervenções " : "Intervenção"]})'
,hideGroupedColumn: true
,enableNoGroups:true
,showGroupName: false
,enableGroupingMenu : true
,scrollOffset:0
})


can someone point me to the right direction?

tks

BitPoet
20 Aug 2009, 7:15 AM
The easiest option is to pass a custom getRowClass function to the viewConfig property of the grid. I.e.


new Ext.grid.GridPanel({
...
,viewConfig: {
getRowClass: function(rec, rowIdx, params, store) {
return rec.get('anulado') == 1 ? 'blue-row' : '';
}
}
...
});


Btw: You should either assign an Ext.grid.GridView (sub)class object to the view property or assign a simple config object to the viewConfig property.

SchattenMann
20 Aug 2009, 7:34 AM
Btw: You should either assign an Ext.grid.GridView (sub)class object to the view property or assign a simple config object to the viewConfig property.

didn't understood this part...

either way i know its suppose to work but nothing happens...

i need to define view as new Ext.grid.GroupingView...so i can't use viewConfig because its ignored when view is defined.

so i tried



,view: new Ext.grid.GroupingView({
forceFit:true
,groupTextTpl:'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Intervenções " : "Intervenção"]})'
,hideGroupedColumn: true
,enableNoGroups:true
,showGroupName: false
,enableGroupingMenu : true
,scrollOffset:0
,getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
console.debug(record)

return (record.data.anulado == 1 ? 'red-row' : '');
}
})


nothing happens...don't even the console input...

that's why i believe it has something to do with the use of GroupView :/

SchattenMann
20 Aug 2009, 8:34 AM
i was able to workaround with this ugly code



this.store.on('load',function(s,r,p){

for (var i = 0; i<this.getStore().data.length ; i++){

var anulado = this.getStore().getAt(i).get('anulado');

if (anulado == true){

this.getView().getRow(i).style.backgroundColor = 'red';

}

}

},this, {scope:this});


but it has to be other way...

dbassett74
22 Sep 2009, 10:14 AM
The easiest option is to pass a custom getRowClass function to the viewConfig property of the grid. I.e.


new Ext.grid.GridPanel({
...
,viewConfig: {
getRowClass: function(rec, rowIdx, params, store) {
return rec.get('anulado') == 1 ? 'blue-row' : '';
}
}
...
});


This works perfect! Thanks for the example. And BTW, this works with store.loadData().