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.

score 7 · Answer 1 · answered Jul 14 '11 at 14:48

7

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.

answered Jul 14 '11 at 14:48

LittleTreeX

1,259
2
12
28

this is a poor solution for something reusable since the id is unique you could not use it more than once within the same grid or e.g. 2 grids in the same page. @GreenGiant's `tdCls` answer is the better solution – jenson-button-event Aug 07 '14 at 11:50
@jenson-button-event you may very well be correct. This was the best solution I could come up with at the time. However, I stopped using ExtJS soon after I posted this, and have not verified or tried anything else. None the less, I'll mark his answer since it does seem more appropriate. Thanks for pointing this out. I'm not even certain that his method was valid or possible at the time. ExtJS4 was rather new then, and it certainly seemed to have it's share of oddities and bugs (a big reason why I stopped using it). – LittleTreeX Aug 07 '14 at 21:50

score 6 · Accepted Answer · answered Feb 29 '12 at 17:52

6

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

answered Feb 29 '12 at 17:52

GreenGiant

4,930
1
46
76

score 0 · Answer 3 · edited Oct 11 '12 at 13:53

The goal is to apply one cls to column, which I did with getRowClass and then remove it after 1-2 sec. The websync is pushing new data every 5 seconds, so when this changes to cell appear, it should be like a blink of a changed column(cell), that goes back to "white"(default) before new data refresh? The value assigned to compare new records with is 0, but in a real case is last value that is being compared!

atian25 · Answer 4 · 2011-07-13T13:28:44.597

0

you'd better read this: http://www.sencha.com/learn/grid-faq/

the section 'To modify a cell/row/column'

edited Jul 13 '11 at 13:28

answered Jul 13 '11 at 11:46

atian25

4,166
8
37
60

I have looked that over, and it appears as though this document is not valid for ExtJs 4. For example, I tried leveraging the auto-generated class: x-grid3-td-{columnID}, and it did not work. (I also tried reasonable variations like: x-grid-td, and x-grid4-td). I will continue looking it over, and post my findings. – LittleTreeX Jul 13 '11 at 14:18

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

4 Answers4

Linked