PDA

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



davidmanohar
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){
if(value!=undefined)
{
return '<span style="background-color:#99CC00; width: 300%">' + value + '</span>'
}
else
return '';
}

see the format applied in the image..

skirtle
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':

http://skirtlesden.com/articles/styling-extjs-grid-cells

and the official docs on tdCls:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column-cfg-renderer

davidmanohar
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.

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