PDA

View Full Version : How to update list with JSON data - all I get is blank screen



robertj98
13 Jul 2010, 7:09 AM
Hi,

I saw the code to use simple list and detail screens and they work fine. The examples used static data. I would like to get the data for the list from a database (export as JSONP). Finally came up with the following - define a store which calls page to get the JSON data:



var store1 = new Ext.data.JsonStore({
autoLoad: true,
root: 'issues',
fields: ['setid', 'setyear', 'setname'],
proxy: {
type: 'scripttag',
url: whostname + '/labs/json2.asp',
extraParams: { 'parm': '1966' ,
'datatype': 'year'
},
reader: {
type: 'json'
}
}
});


var list1 = new Ext.List({
tpl: '<tpl for="."><div class="contact"><strong>{setyear}</strong> {setname}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
store: store1,
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
main.setCard(1);
//** pass the selected data to the detail panel - picked up in the template
detail.update({
setyear: rec.get('setyear'),
setname: rec.get('setname')
});
}
}
});
but the list displays with blank screen - I think its not waiting for the JSON data to come back. Do I need to code a callback handler somewhere to do this or is there a setting to make the lst wait for the data from the store.

Thanks

evant
13 Jul 2010, 7:11 AM
What does the data you return look like?

robertj98
13 Jul 2010, 7:55 AM
Data is:



{ "issues": [ { "setid":"314", "setyear":"1986", "setname":"Christmas. Folk Customs"} , { "setid":"313", "setyear":"1986", "setname":"Royal Air Force"} , { "setid":"506", "setyear":"1986", "setname":"Definitive - High Value"} , { "setid":"312", "setyear":"1986", "setname":"32nd Commonwealth Parliamentary Conference, London"} , { "setid":"466", "setyear":"1986", "setname":"Roman Britain"} , { "setid":"311", "setyear":"1986", "setname":"Royal Wedding"} , { "setid":"310", "setyear":"1986", "setname":"Sport"} , { "setid":"309", "setyear":"1986", "setname":"Medieval Life"} , { "setid":"308", "setyear":"1986", "setname":"Europa. Nature Conservation. Endangered Species"} , { "setid":"1394", "setyear":"1986", "setname":"Regional Definitive - Scotland"} , { "setid":"307", "setyear":"1986", "setname":"60th Birthday of Queen Elizabeth II"} , { "setid":"501", "setyear":"1986", "setname":"The Story of British Rail"} , { "setid":"306", "setyear":"1986", "setname":"Appearance of Halleys Comet"} , { "setid":"305", "setyear":"1986", "setname":"Industry Year"} , { "setid":"574", "setyear":"1986", "setname":"Regional Definitive - Scotland"} , { "setid":"573", "setyear":"1986", "setname":"Regional Definitive - Northern Ireland"} , { "setid":"575", "setyear":"1986", "setname":"Regional Definitive - Wales"} ] }


Is there any way to inspect the date store through the Chrome Javascript console - to see if the data has been returned?

evant
13 Jul 2010, 8:08 AM
If you're using a script tag proxy, then that's incorrect. In fact, I'd say it's probably crashing. Read the docs here about the STP:

http://www.sencha.com/deploy/touch/docs/?class=Ext.data.ScriptTagProxy