在Sencha Touch商店中使用localStorage

时间:2011-01-25 12:23:43

标签: local-storage sencha-touch

我正在尝试使用Sencha Touch应用程序中的localStorage构建一个商店。

我想从localStorage [“feeds”]获取数据的localStorage看起来像这样:

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

我正试图通过以下内容进入商店:

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

当我在Chrome中尝试store.load()时,由于TypeError而失败:无法读取null的属性'title'。

我该如何访问本地存储的每个标题和每个网址?

看着纸牌游戏的例子让我头晕目眩。

我的Sencha应用程序的其余部分现在不依赖于这个商店,并且完全加载。我通过Chrome中的控制台检查商店中是否有商品。

2 个答案:

答案 0 :(得分:1)

本地存储是否已在其中包含具有不同模型“架构”的条目?只是一个想法:尝试不同的代理ID。

但我认为你注册商店比直接实例化更好。尝试:

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

然后

store:'store'
列表中的

或与其绑定的任何内容。

答案 1 :(得分:1)

此类localStorage格式并非特定于Sencha Stores。但是如果你真的需要从以这种方式格式化的localStorage中读取,你可以尝试以下方法。有可能: - )

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