How to apply background color (or custom css class) to column in grid - ExtJs 4?

Question

It seems like it should be so simple, but I simply cannot get this done (I don't even need it done dynamically). For example, suppose I have a simple 2 column grid setup like so:

    columns : [       
       {header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'},
       {header: 'CATEGORY', dataIndex: 'category', width:100}
    ]

The cls: 'red' attribute only effects the header and not the actual column. I have seen elsewhere that I should be using a custom renderer (maybe), but if I try something like:

{header: 'USER', dataIndex: 'firstName', width:70, 
     renderer: function(value) {
         this.addCls('red');
         return value;
    }
 }

I still get the boring white background. I have also seen people using a renderer function definition like so : function(value, metadata, record, rowIndex, colIndex, store), but when I used an alert() to test the input parameters I get undefined for everything except value, which makes me believe that maybe this was only valid for versions before ExtJs 4.

I also tried returning something like '<span class="red">' + value + '</span>' in my renderer function, but this only highlighted the text, rather than change the entire background of the column.

I do not want to override the default Ext css classes because I want to apply the background colors to a specific grid in the app, and not all of them.

Furthermore, all the columns of the grid in question may have different colors (note that in the example I only added the class to the first column).

Assume that red is defined as .red {background:#FF0000;} in my css file.

Answer 1

While the grid-faq suggested by atian25 does not apply to ExtJs 4, I was able to use it to guide me towards the correct answer to my question.

In the javascript, add an ID attribute to your column definition:

{header: 'SomeHeader', id: 'myColumn' dataIndex: 'theData'}

This will generate the following css class for all the td elements in that column:

.x-grid-cell-myColumn

In your css file (which must be loaded after the Ext css file) add the following definition:

.x-grid-table .x-grid-cell-myColumn {background:#FF0000;}

And bingo, you have a bright red background for said column. Using this same technique you can customize individual columns any way you want.

NOTE: without using the .x-grid-table selector the "row" classes specificity will win. You will also need to redefine .x-grid-row-over if you want to maintain a hover effect over your custom column.

Answer 2

Add a tdCls attribute to your column header definition, with a value of the CSS class you want to use.

columns : [
   {header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'},
   {header: 'CATEGORY', dataIndex: 'category', width:100}
]