PDA

View Full Version : List + Ajax + JSON



gregory-m
18 Sep 2010, 12:03 AM
Hi,
This is my first thread ans my first day programming with Sencha.
What I am trying to do, is to get a list of posts in json format through ajax and then display a list.

I started the the "List" example but I really don't know if I am doing this the proper way.

The json response looks like this:



[
{"post":{"content":"This is content 1"}},
{"post":{"content":"This is content 2"}}
]



And this is my code:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Post', {
fields: ['content']
});

var posts;
Ext.Ajax.request({
url: 'http://www.jsuisdechire.com/api/xxx/recent?page=1',
headers: {'Access-Control-Allow-Origin': '*'},
method: 'get',
success: function(response){
posts = response.responseText.split('[')[1].split(']')[0]; alert(posts); //Remove the brackets

var groupingBase = {
tpl: '<tpl for="."><div class="Post">{content}</div></tpl>',
itemSelector: 'div.Post',

singleSelect: true,
grouped: false,
indexBar: false,

disclosure: {
scope: 'test',
handler: function(record, btn, index) {
alert('Disclose more info for ' + record.get('content'));
}
},

store: new Ext.data.Store({
model: 'Post',

getGroupString : function(record) {
return record.get('content')[0];
},

data: posts
})
};

if (!Ext.is.Phone) {
new Ext.List(Ext.apply(groupingBase, {
floating: true,
width: 350,
height: 320,
centered: true,
modal: false,
hideOnMaskTap: false
})).show();
}
else {
new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}));
}




}
});
}
});



If I sum up the code, I first do the ajax request, when I get the response I build and show the list.
I think my code isn't working because my "posts" format isn't correct for "data".

Could you tell me if I am doing this the proper way and what is wrong with my code?
Thank you

Greg