ExtJS 4 - How to add background colors to columns

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.

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

Answer 2

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.

Answer 3

add this to whatever column you want to change color

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