Using localStorage in store in Sencha Touch

Question

I'm trying to build a store with elements from localStorage in my Sencha Touch application.

The localStorage I want to get data from is localStorage["feeds"] and looks like this:

"[{"title":"Title 1","url":"http://stackoverflow.com"},
  {"title":"Title2","url":"http://google.com"}]"

I'm trying to get it into the store with the following:

var feedsPanel;
var store;
Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
    Ext.regModel("feedModel", {
        fields: [
            { name: "title", type: "string" },
            {name: "url", type:"string"}
        ]
    });
    store = new Ext.data.Store({
            proxy: new Ext.data.LocalStorageProxy({
                id: 'feeds'
            }),
            model:"feedModel"
    });

When I in Chrome try store.load(), this fails because of TypeError: Cannot read property 'title' of null.

How am I supposed to access every title and every url from this localStorage?

Looking at the example of the Solitaire game just makes me dizzy.

The rest of my Sencha application does not rely on this store as of now, and loads perfectly. I check if there are items in the store with the Console in Chrome.

kio21 kio21 · Accepted Answer · 2012-03-28T20:37:04

Such localStorage format is not specific for Sencha's Stores. But if you realy need to read from localStorage formatted in that way, you may try the following. It is possible :-)

// first prefill localStorage
var feeds = [], j = 0;
while (j < 25) {
    feeds.push({'title': 'Title ' + ++j, url: 'http://link' + j + '.com'});
}
localStorage.setItem('feeds', Ext.encode(feeds));

// Sencha Touch v1 Application
new Ext.Application({
    name: 'App',

    launch: function() {
        var store = new Ext.data.JsonStore({
            id: 'feedstore',
            fields: ['title', 'url'],
            autoload: true,
            proxy: {
                id: 'feedproxy',
                type: 'memory',
                url: 'feeds',
                create: function () {
                    console.log('feed: CREATE');
                },
                read: function (operation, callback, scope) {
                    console.log('feed: READ');

                    var data = localStorage.getItem(this.url),
                        i, len, records = [];

                    console.log('data: ' + data);
                    data = Ext.decode(data);

                    if (Ext.isArray(data)) {
                        len = data.length;
                        for (i = 0; i < len; ++i) {
                            records.push(new this.model(data[i]));
                        };

                        // return model instances in a result set
                        operation.resultSet = new Ext.data.ResultSet({
                            records: records,
                            total  : len,
                            loaded : true
                        });

                        // announce success
                        operation.setSuccessful();
                        operation.setCompleted();

                        // finish with callback
                        if (typeof callback == "function") {
                            callback.call(scope || this, operation);
                        }
                        Ext.getBody().unmask();
                    }
                },
                update: function () {
                    console.log('feed: UPDATE');
                },
                destroy: function () {
                    console.log('feed: DESTROY');
                },
                reader: {
                    type: 'json'
                }
            }
        }).load();

        this.viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            items: [{
                xtype: 'list',
                itemTpl : '{title}<br />{url}',
                store: store
            }]
        });
    }
});

Using localStorage in store in Sencha Touch

2 Answers