让 LocalStorageProxy 与 TreeStore 一起使用

Question

你好，

我正在构建一个 Sencha Touch iPhone 应用程序，它使用 TreeStore，它与 NestedList 配合得很好，但我遇到了困难。

它需要一种方法来读取静态存储（TreeStore）中的数据，将其加载到 localStorage 中，使其可写，然后保存一些用户首选项。我发现 localStorageProxy 很可能就是我所需要的（我很欣慰地发现我不必手动序列化和反序列化 JSON 存储！）但是在阅读了它的文档并尝试并失败了一些事情之后，我我不知所措。

就目前情况而言，它生成了 localStorage… 存储，但它是空的，我猜这是因为我没有加载任何东西到其中，但在执行 app.stores.event_store.load(); 时，屏幕是空白，控制台显示 localStorage 为空，没有错误。

我的模型：

Ext.regModel('Events', {
    fields: [
        {name: 'text',      type: 'string'},
        {name: 'info',      type: 'string'},
        {name: 'attend',    type: 'boolean', defaultValue: 'false'}
    ]   
});

我的商店：

app.stores.event_store = new Ext.data.TreeStore({
    model: 'Events',
    root: data,
    storeId: 'eventStoreId',
    proxy: {
        type: 'localstorage',
        id: 'eventsAttending',
        url: 'store.js',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

app.stores.event_store.load();

这可能源于对这些模型和商店如何相互作用缺乏基本的了解，但如果有人可以提供帮助，良好的业力将会送给你。

完整的应用程序可以在 它的 GitHub 存储库 中找到。

-费蒂莫

Answer 1

TreeStore 需要分层数据

var data= { 
    text: 'Groceries',
    items: [{
        text: 'Drinks',
        items: [{
            text: 'Water',
            items: [{
                text: 'Sparkling',
                leaf: true
            },{
                text: 'Still',
                leaf: true
            }]
        },{
            text: 'Coffee',
            leaf: true
        }]
    }] 
}

，但 LocalStorageProxy 无法匹配此数据结构的模型。

我将使用 AJAX 请求来加载“store.js”文件，并使用 localStorage 直接“存储”数据 blob。

Ext.Ajax.request({
    url: 'store.js',
    success: function(response, opts) {
       localStorage.StoreJSBlob = response.responseText;
    }
});

那么你的商店将看起来像这样：

var store = new Ext.data.TreeStore({
    model: 'Events',
    root: localStore.StoreJSBlob,
    proxy: {
        type: 'ajax',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

你只需要正确地将事件链接在一起，因为异步调用可能会让你陷入困境