PDA

View Full Version : Creating a list and fill it from a JSON source



forsen
17 Mar 2011, 12:27 AM
Hi!

Im having trouble with what should be a simple thing to do but cant get it to work. I have tried several examples from different sites and looked and the Sencha Touch API but no luck. What I am trying is to just fill a List from an external JSON source. To make it as simple as possible I've just put it in an external file for now.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});



var store = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

getGroupString : function(record) {
return record.get('firstName')[0];
},
proxy: {
type: 'ajax',
url : 'test.json',
reader: {
type: 'json'
}
}
});

var list = new Ext.List({
fullscreen: true,

itemTpl : '{firstName} {lastName}',
store: store
});
list.show();

}
});


The JSON file:



[
{
"firstName" : "pelle",
"lastName": "ollesson"
},
{
"firstName" : "nisse",
"lastName": "pellssdfok"
}
]


So, is there something that looks weird?

Thanks

JanLoesbrock
17 Mar 2011, 1:09 AM
Hi,

you must load the store.

For example with the "autoLoad : true"-ConfigOption or the load-function.


var store = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

getGroupString : function(record) {
return record.get('firstName')[0];
},
proxy: {
type: 'ajax',
url : 'test.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
// or
store.load();


Best regards
jan

forsen
17 Mar 2011, 1:20 AM
Thanks for the quick answer. Tried both the autoload and store.load but did not work. And if you check the console in Chrome it doesnt give any errors either.

All it does is showing a white screen that you can scroll but there is not a list there (or an empty list).

EDIT:

Ok, a new error. I removed "sorters" and "getGroupString" to make the code even smaller and now I get the loading-animation. But it loads forever.

If i check the console it says: "Failed to load resource: the server responded with a status of 404 (Not Found) test.json"

But the file is in the same folder!

EDIT2: SOLVED! The webserver im using did not allow files with json as extension. Now to the next step: Trying to get some json data from the server :)

JanLoesbrock
17 Mar 2011, 1:40 AM
it works on my smartphone (Android 2.2) and also on my computer with Chrome (10.0.648.133 (77742) Ubuntu 10.04)

One idea is to use a callback-function, to see if the store is loaded.

var store = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

getGroupString : function(record) {
return record.get('firstName')[0];
},
proxy: {
type: 'ajax',
url : 'test.json',
reader: {
type: 'json'
}
}});
store.load(function(records, operation, success){
alert("store loaded");
});

JanLoesbrock
17 Mar 2011, 1:44 AM
can you open ans see the json-file via the url in your browser?

forsen
17 Mar 2011, 1:55 AM
I have edited my answer above. Already solved it. Thanks for the help