View Full Version : How do I change background-color on a cell in a ListView?

18 Jun 2010, 6:26 AM

I'm just beginning with ExtJS so this might be a stupid question..
I have a ListView with several Columns, it's filled with simple true/false data from a Store. I would like to change the background-color property of the entire cell depending on the data it get's filled with.

I managed to add a div to the cell with another background color but then I get the border around each cell in the standard blue. Is there any way to change a property on a parent object in the dom?

This is the code I used:

xtype: 'lvcolumn',
header: 1,
dataIndex: 'lane_1',
align: 'center',
tpl : new Ext.XTemplate(
'<tpl if="lane_1 == \'0\'">',
'<dt style="background-color: red; width: 100%;">&nbsp;</dt>',

18 Jun 2010, 7:13 AM
If you want to change the color of the entire cell then you'll have to adjust the ListView tpl (it currently only adds width and text-align styles to the DT element).

18 Jun 2010, 7:15 AM
Thanks, that's what I thought..

Is there anyway to get the current dataIndex in XTemplates?
Like if="this.dataindex == 1" .... so I can write a single functions to validate all cells?
I did a console.log(this) in a tpl but there were no dataIndex variable there..

18 Jun 2010, 7:22 AM
You'll need to write a prepareData method that adds the dataIndex to the available data.