Hot to change grid row background-color?

[Romick]

Hi!

I couldn't find a solution for making grid rows background-color that is fetched from the store.

I have tied:


viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){

rowParams.tstyle += "background-color:" + record.data.color + ';'; //deprecated

this.getRow(rowIndex).style.backgroundColor = 'Yellow';

Ext.fly(this.getRow(rowIndex).style.backgroundColor = 'Yellow');

return Ext.String.format('" style="background-color:{0} !important;', record.data.color);
//this makes <tr class="x-grid-row" style="background-color:#B0E0E8 !important;">, but it not work i dont know why

}



I even tried:


features: [
Ext.create('Ext.grid.feature.RowBody', {
getAdditionalData: function(data, rowIndex, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: "",
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
}
}
})
],

But i dont know how to use it.
However:


renderer: function (val, metadata, record, rowIndex){
metadata.style = 'background-color:'+record.data.color+';';
metadata.tdAttr = 'style="background: '+record.data.color +'"';
//this.getView().getRow(rowIndex).style.backgroundColor='Yellow';
return '';
},

Work fine but it is only for one columns. Shoud i add the same color renderer to each column?
To fix the row background color.

[Jeep15603]

In this case I was able to do a direct inline style for both color and indent. Line 6 is one color (different from the main style) and children on the next three rows are both colored and indented. :

<style>
.rowaccent1 {background-color: #8fbc8f; }
.rowaccent2 {background-color: #c4f7c5; padding-left: 20px;}
</style>


<script>
testGridRender = function() {

Ext.override( Ext.grid.GridView, {
getRowClass: function(record, rowIndex, rp, ds){
if(rowIndex == 6){
return 'rowaccent1';
} else if (rowIndex >= 7 && rowIndex <= 9) {
return 'rowaccent2';
}
else
{
return '';
}
}
});
}
</script>

[jay@moduscreate.com]

Overriding is bad mojo for apps unless you want to change behavior for entire apps.

[jay@moduscreate.com]

getRowClass should return a string that represents a CSS style name, not a style atribute.

[Romick]

Hi!

Jay thank you for your book it realy very very helpfull. I started learn reading it. Many thanks for the realy good book.

Ok thank for the answers. But what i am actually need it is to change background color of the row dependent on the store data, which consist color value. Example picture atached.
30994
Using code :


return Ext.String.format('" style="background-color:{0}', record.data.color);

I was tring to cheat. I recived a good html as i need:


<tr class="x-grid-row" style="background-color: #B0E0E8">

But fortunatly it not work. I want ask you in what direction should i dig?

P.S. Glad to see here Jay Garcia. I love your screen casts.

[chramer]

So it should be something like this -->>http://jsfiddle.net/serju/sFjGA/10/
I can't figure it out why each even row it's white.. something with the css!!

UPDATE :
Now it works! http://jsfiddle.net/serju/sFjGA/10/
Good luck dear neighbour ;)


viewConfig: {
getRowClass: function(record) {
return record.get('color');
}
}

[Romick]

Thank you dear chramer!
First of all, it is not work on that site. (dont know why). But it is seems to work, becouse you defined all colors in css. I see your point of view. I have found this solution too, but is not exacle what I need. I will received color like this '#FF0000' in store. Thats why using css is not posible (I think so). And then user will have the ability to change row color on the fle using color picker. Color picker here http://www.sencha.com/forum/showthread.php?134576-Ext.ux.AdvancedColorPicker i have found (fix some minor errors) and it works good.

31004

http://jsfiddle.net is it your site? It's cool site!
P.S. Thank you for your helping me, my dear neighbour ;) But no luck :(