在 Sencha Touch 的 store 中使用 localStorage

Question

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

我要从中获取数据的 localStorage 是 localStorage["feeds"]，如下所示：

"[{"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 的属性“标题”而失败。

我应该如何访问这个 localStorage 中的每个标题和每个 url？

看单人纸牌游戏的例子简直让我头晕目眩。

到目前为止，我的 Sencha 应用程序的其余部分不依赖此存储，并且可以完美加载。我使用 Chrome 中的控制台检查商店中是否有商品。

Answer 1

这种 localStorage 格式并非特定于 Sencha 的商店。但是，如果您确实需要从以这种方式格式化的 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
            }]
        });
    }
});

Answer 2

本地存储中是否已经包含具有不同模型“模式”的条目？只是一个想法：尝试不同的代理 ID。

但我也认为你最好注册一个商店而不是直接实例化它。试试：

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

然后

store:'store'

在列表或绑定到它的任何内容中。