Hi All,

I am trying to display a table in Grid Panel Cell using template.
I gave the template like below.
columns : [{
header : '',xtype: 'templatecolumn',
tpl:'<table border="0px solid RED;" style="width: 100%;height:55px">'+
'<tr height="20%" style="background:#CECACA" >'+
'<td align="right" valign="top" style="font-size: 12px" width="10%">&nbsp;</td>'+
'</tr>'+
'<tr height="40%" style="background:#85C6E5">'+
'<td align="center" valign="top" style="font-size: 12px;font-weight: bold;color: #000000" width="50%">Rooms</td>'+
'</tr>'+

'<tr height="40%" style="background:#A4DBAB">'+
'<td align="center" valign="top" style="font-size: 12px;font-weight: bold;color: #000000" width="50%">Price</td>'+
'</tr>'+
'</table>', flex : 1, sortable:false
}]

problem i am facing is when this table displays in the GridPanel Cell the below >div> tag is adding on top of the table (which is added using template)

the style "x-grid-cell-inner" in class has a padding , which i don't want.
<div class="x-grid-cell-inner x-unselectable" style="; text-align: left;" unselectable="on" id="ext-gen1455">

(If i override x-grid-cell-inner in my local .css file it will change all over , which i don't want , i want this only one place)

I figured it that by using the style i can remove the padding. But in the ext-all-debug.js
the style is expecting an id , which i am not able to figure it out, how to pass.
metaRowTpl: [
'<tr class="' + Ext.baseCSSPrefix + 'grid-row {addlSelector} {[this.embedRowCls()]}" {[this.embedRowAttr()]}>',
'<tpl for="columns">',
'<td class="{cls} ' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-cell-{columnId} {{id}-modified} {{id}-tdCls} {[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}><div unselectable="on" class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',
'</tpl>',
'</tr>'
],

Can someone can guide me how to pass the id to "metaRowTpl:" .

thanks for the help.

Regards
Jeevan.