Sencha Touch JSON loading to localstorage not working?

Question

I have the following code for my entire Sencha Touch App (for app.js). I am trying to get it so the JSON file is loaded into localstorage and the username field is displayed in a list on the "data" page.

Any hints to what is going wrong? The app itself loads fine but the JSON isn't loading into localstorage or displaying anything.

var helloWorld = new Ext.Application({

Users: Ext.regModel('Users', {
    fields:[
        {name:'id'},
        {name:'username'},
        {name:'password'},
    ]
}),

onlineStore: new Ext.data.Store({
    model: 'Users',
    proxy: {
        type: 'scripttag',
        url: 'http://selectout.net/manage/oil/www/samplecustomers.json',
        reader: new Ext.data.JsonReader({
            root: 'users'
        }),
        timeout: 2000,
        listeners: {
            exception:function () {
                console.log("I think we are offline");
                helloWorld.Users.bindStore(helloWorld.offlineStore);
                helloWorld.offlineStore.load();
            }
        }
    }
}),

offlineStore: new Ext.data.Store({
    model: 'Users',
    proxy: {
        type: 'localstorage',
        id: 'helloworld'
    }
}),

launch: function() {
    this.tabs = new Ext.TabPanel({
        fullscreen: true,
        dockedItems: [{xtype:'toolbar', title:'Hello World'}],
        tabBar: {
            ui: 'dark',
            layout: {
                pack: 'center'
            }
        },
        items: [
            {cls:'hello', title:'Hello'},
            {cls:'world', title:'World'},
            {
                cls: 'Users',
                title: 'Users',
                xtype: 'list',
                store: null,
                itemTpl:'{username}'
            }
        ]
    });
    this.Users = this.tabs.items.getAt(2);

    this.onlineStore.addListener('load', function () {
        console.log("I think we are online");
        helloWorld.offlineStore.proxy.clear();
        helloWorld.offlineStore.sync();
        helloWorld.Users.bindStore(helloWorld.offlineStore);
    });
    this.onlineStore.load();
}

});

Adam Marshall Adam Marshall · Accepted Answer · 2012-04-20T04:33:23

If the file samplecustomers.json is in the same domain as your app you don't need to use the full path.

But if its on a different domain you will have to use JSONP to fetch it: Ext.data.JsonP

The proxy you are using is designed for same domain reads.

Sencha Touch JSON loading to localstorage not working?

1 Answers