JSONstore on XTemplate

Posted by Teddy Jasin

July 13, 2008

I can't find any samples using XTemplate usinng JSONstore directly without using dataview or other component. I just wanted to use XTemplate with JSONstore loaded from the server directly... thats it :).
Somehow i always got path error when rendering xtemplate with jsonstore in a dataview, if not 'path' error then I will get 'values' has no property error :(.

anyway managed to create the XTemplate using jsonstore without using dataview.

 
var tpl = new Ext.XTemplate(
'
<table id="history-table">',
'
<tr class="heading">
<td>&nbsp;</td>
<td>Membership</td>
<td>Issue Date</td>
<td>Expiry Date</td>
</tr>
 
',
'<tpl for=".">',
'<tpl if="Ext.isEmpty(values.FIELD_1) == false">',
'
<tr class="{[xindex % 2 === 0 ? "odd" : "even"]}">',
'
<td>{#}</td>
 
',
'
<td>{FIELD_1}</td>
 
',
'
<td>{FIELD_2}</td>
 
',
'
<td>{FIELD_3}</td>
 
',
'</tr>
 
',
'</tpl>',
'<tpl if="Ext.isEmpty(values.FIELD_1) == true">',
'
<tr class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'
<td colspan="4">No membership found</td>
 
',
'</tr>
 
',
'</tpl>',
'</tpl>',
'</table>
 
',
'
<div class="x-clear"></div>
 
'
);
 
var store = new Ext.data.JsonStore({
	url: 'index.php?page=data&entity=table1&search[ID]=20',
	root: 'rows',
	autoLoad: true,
	fields: [
    {name: 'counter'},
    {name: 'ID',type :'string',sortType:'asText'},
	{name: 'FIELD_1',type :'string',sortType:'asText'},
	{name: 'FIELD_2',type :'string',sortType:'asText'},
	{name: 'FIELD_3',type :'string',sortType:'asText'}
	]
	,listeners: {
		'load': {fn: function(){
			tpl.overwrite('20-membershipinfo',store.reader.jsonData.rows, true);
			}
		}
	}
});

as you see, the xtemplate data only applied after load using the listeners event. If I don't do using listeners, example execute store.load() followed by tpl.overwrite('20-handheldinfo',store.reader.jsonData.rows, true); I will always get values error... seems the data is not loaded immediately after the load() functions... anyway this code will be better without using extra component like dataview just to show this data