ExtJS 4 - How to add background colors to columns of a grid?

Question

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.

Solution 1

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.

Solution 2

add this to whatever column you want to change color

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

Solution 3

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;
}

Comments

[Daniel van Dommele]

Why not use the opMeta.style property?

[dougajmcdonald]

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 - docs.sencha.com/ext-js/3-4/#!/api/…