8

I have a grid in which I need to provide different background colors to various columns.

These column colors should also not be overwritten by the mouse-over color.

I have tried using cls and tdCls but no luck.

Could anyone guide at how this could be achieved?

Thanks in advance.

giliev
  • 2,938
  • 4
  • 27
  • 47
netemp
  • 4,115
  • 12
  • 43
  • 63
  • I have been able to find a solution for this. I am creating a renderer function for each column and I am setting the metadata in it like: renderer : function(value, metadata, record, rowIndex, colIndex, store){ //metadata.tdCls = 'lookUpClass'; metadata.style = 'background:#EBEBF5'; return value; } When using tdCls, its applying color to alternate rows and not each one. Hope this is the way of achieving background-color and may be this helps someone. If any better way, please share. – netemp Sep 16 '11 at 12:18

3 Answers3

6

NetEmp is right here, you want a renderer and you want to use the direct 'style' method or I did it below using the following:

function greyRenderer(lpValue, opMeta, opData) 
{

    if (opData.data["Condition"] == 0) {
        opMeta.attr = "style='color: #aaa';";
    }

    lpValue = Ext.util.Format.htmlEncode(lpValue); 
    return lpValue;
}

Note here I check the value on the row in a particular field and then apply the colour to the foreground text and html encode the output, you can obviously just switch things to your specific requirements.

dougajmcdonald
  • 19,231
  • 12
  • 56
  • 89
  • 3
    Why not use the opMeta.style property? – Daniel van Dommele Jul 19 '12 at 07:46
  • As i mentioned in the answer, you could use the style method, but that renderer is just one I had kicking about. We weren't using ExtJS4 at the time and I believe 'attr' was the only way to apply style - http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.Column-property-renderer – dougajmcdonald Jul 19 '12 at 11:53
4

add this to whatever column you want to change color

renderer:function(value,metaData){
    metaData.style="background-color:#EAA8A8";
    return value;
},
Eme
  • 71
  • 5
1

You do not need a renderer for this. What's happening is that ExtJS's zebra striping style (x-grid-row-alt) and mouse over style take precedence over the style you defined in tdCls. Add !important to the background color and it'll work. For example:

.my-column-style {
    background-color: blue !important;
}
ivern
  • 131
  • 6