View Full Version : List + Ajax + JSON

18 Sep 2010, 12:03 AM
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:

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

var posts;
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
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