Using localStorage in store in Sencha Touch

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.

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
            }]
        });
    }
});

Does the local storage already have entries in it which have a different model 'schema'? Just a thought: try a different proxy id.

But also I think you are better registering a store than instantiating it directly. Try:

Ext.regStore('store', {
    proxy: {...}
    ...
);

Then

store:'store'

in the lists or whatever that bind to it.