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.

Node

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. – Node

Answer 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.

Multipartite

Why not use the opMeta.style property? – Implausible

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/… – Multipartite

Answer 2

add this to whatever column you want to change color

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

Wittenburg

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

Rectocele