RowExpander XTemplate doesn't shows JSON data

[Romantik]

Hi All.

Using one example "Grid Plugins Examples" (first one with RowExpander) I'm trying use
XTemplate and JSON data:


Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
// for example I wrote JSON data in code
Ext.grid.data = {
"data": [{
"part_id": "1",
"part_name": "Part One",
"serv": [
{"serv_name": "Service 1"},
{"serv_name": "Service 2"},
{"serv_name": "Service 3"}
]},{
"part_id": "2",
"part_name": "Part Two",
"serv": [
{"serv_name": "Service 11"},
{"serv_name": "Service 21"},
{"serv_name": "Service 31"}
]}
]};
// shared reader
var reader = new Ext.data.JsonReader(
{root:'data'}, [
{name: 'part_id'},
{name: 'part_name'}
]);
var expander = new xg.RowExpander({
tpl : new Ext.Template(
'<tpl for="data">',
'<tpl for="serv">',
'<p><b>Service:</b> {serv_name}</p>',
'</tpl>',
'</tpl>'
)
});
var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.data
}),
cm: new xg.ColumnModel([
expander,
{id:'part_id',header: "ID", dataIndex: 'part_id'},
{id:'part_name',header: "Part", dataIndex: 'part_name'},
]),
viewConfig: {
forceFit:true
},
width: 600,
height: 300,
plugins: expander,
collapsible: true,
animCollapse: false,
title: 'Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
renderTo: document.body
});
});


it doesn't work

if I change other example "Templates Example" (second part):


Ext.onReady(function(){
var data2 = {
"data": [{
"part_id": "1",
"part_name": "Part One",
"serv": [
{"serv_name": "Service 1"},
{"serv_name": "Service 2"},
{"serv_name": "Service 3"}
]},{
"part_id": "2",
"part_name": "Part Two",
"serv": [
{"serv_name": "Service 11"},
{"serv_name": "Service 21"},
{"serv_name": "Service 31"}
]}
]};
var p2 = new Ext.Panel({
title: 'XTemplate',
width: 300,
html: '<p><i>Apply the template to see results here</i></p>',
tbar: [{
text: 'Apply Template',
handler: function(){

var tpl = new Ext.XTemplate(
'<tpl for="data">',
'<tpl for="serv">',
'<p><b>Service:</b> {serv_name}</p>',
'</tpl>',
'</tpl>'
);
tpl.overwrite(p2.body, data2);
p2.body.highlight('#c3daf9', {block:true});
}
}],

renderTo: document.body
});
});


this example works correct

help me please

thanks for any help
Best regards, Andriy Transkyy

[Romantik]

FireBug shows an error "data is not defined"
when I change

'<tpl for="data">'
as

'<tpl for=".">'
end remove

'<tpl for="cats">'
I can set and see part_name data

[westvovik]

Please reply if you solve this