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

Tags: css,grid,extjs4

Problem :

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) {
         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.

Solution :

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}

    CSS Howto..

    How to only make a css element appear on one page?

    How to stop Navigation bar list from changing position?

    How to refer to a child class CSS

    How do I mask a region of the page in a responsive design using CSS?

    How to add and remove div's (input)

    How to apply css and elemental styles to a MVC 3 Web Application

    How to make the long text to fit inside a small div?

    How can I change my code from PHP to HTML?

    How to move the blue twitter bird slowly using css and js?

    How to remove the border that show after clicking a picture

    How to setup a ASP template

    How to set different css attributes with JQuery?

    Javascript: How do I get the id of a clicked link and then style it in css

    Main navigation, classes on/off. HGelp understanding how this is built

    How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

    How do I get my div to overlay on top of other table rows?

    How should a graphic designer learn web design? [closed]

    How to use CSS in Emails (specifically, to design hyperlink button)

    How can I force the download of unused CSS images?

    Hide one div when showing another with JavaScript

    How to make images always relative to a div using CSS

    How can I position two
    ? One from the left and one from the right of a bootstrap modal?

    How to apply different css style for IE 10 and 11 only?

    HTML/CSS: How to make web page stay put when resizing browser window?

    Show all text document

    How to check if user is in high contrast mode via JavaScript or CSS

    How to position a set in Raphael SVG?

    how to desaturate background image of a div using css?

    How to align text next to a div?

    how to make menu on mouse hover in CSS