PDA

View Full Version : template could'nt read data from jsonstore



unisabilly
27 Dec 2010, 2:55 AM
I tried to setup a template, a very simple one, but without any luck, seems like i cant get the value out of jsonstore for the template, please help !! the following are the codes:

This is the template part

var top_template = new Ext.Template
(
'<table width="100" border="1" cellpadding="5" cellspacing="0" bgcolor="lightblue">',
'<tr height="40">',
'<td width="20">test</td>',
'<td width="20">{product_name}</td>',
'</tr>',
'</table>'
);

This is the jsonstore part

var top_template_store = new Ext.data.JsonStore({
url: 'template_datastore.php',
fields: [{name: 'product_name', mapping: 'product_name'}],
autoLoad: true
});

This is the dataview part

var top_data_view = new Ext.DataView
({
tpl: top_template,
store: top_template_store,
});

top_template.overwrite(document.body, top_template_store);

this is the output of template_datastore.php

[{"product_name":"Controller for 200L Retrofit System"}]

unisabilly
27 Dec 2010, 3:26 AM
If I use the following code, everything works fine, so .... I guess the problem is with my jsonstore ..!?

var data = {
product_name: 'Controller for 200L Retrofit System'
};


top_template.overwrite(document.body, data);

Condor
27 Dec 2010, 3:44 AM
1. A DataView expects repeating data, so your template is missing a <tpl for=".">. Also, it needs an itemSelector (probably 'tr' in your case).

2. You do realize that loading is asynchronous? The data will only be available in the store load event handler.

unisabilly
27 Dec 2010, 4:01 AM
Thx so much for your reply ~
I change the the code to the following ... and still not working .... any other hints !?

var top_template = new Ext.Template
(
'<table width="100" border="1" cellpadding="5" cellspacing="0" bgcolor="lightblue">',
'<tpl for=".">',
'<tr height="40">',
'<td width="20">test</td>',
'<td width="20">{product_name}</td>',
'</tr>',
'</tpl>',
'</table>'
);

and ....

var top_data_view = new Ext.DataView
({
tpl: top_template,
store: top_template_store,
itemSelector: 'tr'
});
top_template_store.load();
top_template.overwrite(document.body, top_template_store);

Condor
27 Dec 2010, 4:20 AM
1. Why do you need the dataview if you are using the tpl directly?

2. You are still not waiting for the store to load (using the load event or the load() callback).

3. Your tpl is correct for a DataView, but needs changes if you want to use it directly with the store as data.