View Full Version : How to color cell Background Using Ext.XTemplate

21 May 2014, 4:59 AM
I am trying to color the cells of treegrid using TPL
But coloring is applied only to text in the cell but not the entire cell.

here is my code..

/* calling the function for formatting*/

curretObject["tpl"]=new Ext.XTemplate('{'+curretObject.dataIndex+':this.doFormat}',
{doFormat: fn});

/*function for formatting*/

function fn(value, metaData, record, rowIndex, colIndex,v){
return '<span style="background-color:#99CC00; width: 300%">' + value + '</span>'
return '';

see the format applied in the image..

21 May 2014, 8:09 AM
I wouldn't use an XTemplate for this.

What about just setting the tdCls of the metaData in a column renderer and then using a bit of CSS to set the background-color?

See 'Dynamic Column Styling':


and the official docs on tdCls:


21 May 2014, 9:12 PM
yeah but i will be passing the image color dynamically for every cell.

'<span style="background-color:'+image+'; width: 300%">' + value + '</span>'

color will be passed using the 'image' variable
so many CSS i have to configure.
So please do suggest me any other way of coloring the background.

22 May 2014, 12:08 AM
You can also pass style in the metaData.