使LocalStorageProxy与TreeStore一起使用

时间:2011-05-28 14:16:34

标签: javascript sencha-touch local-storage extjs

Hullo,

我正在构建一个使用TreeStore的Sencha Touch iPhone应用程序,该应用程序可以很好地与NestedList配合使用,但我已经碰壁了。

它需要一种方法来读取静态存储(TreeStore)中的数据,将其加载到localStorage中以使其可写,然后保存一些用户首选项。我已经发现localStorageProxy最有可能是我需要的东西(我发现我没有手动序列化和反序列化JSON存储我感到宽慰!)但是在阅读了它上面的文档并尝试并失败了一些东西之后我感到宽慰我不知所措。

就目前而言,它会生成localStorage ...存储但它是空的,我猜是因为我没有加载任何内容但是在执行app.stores.event_store.load();时屏幕为空并且Console显示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();

这可能源于对这些模特和商店如何相互作用缺乏基本了解,但如果有人可以提供帮助,那么良好的业力将以你的方式发送。

完整的申请表可以在it's GitHub repo找到。

-fetimo

1 个答案:

答案 0 :(得分:3)

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请求直接使用localStorage加载“store.js”文件来“存储”数据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'
        }
    }
});

您必须正确地将事件链接在一起,因为异步调用可能会让您失意