Getting the LocalStorageProxy working with a TreeStore

Question

Hullo there,

I am building a Sencha Touch iPhone app that utilises a TreeStore which works nicely with a NestedList but I've hit a wall.

It needs a way to read data in a static store (the TreeStore), load it into localStorage so it's writable and then save some user preferences. I've figured out that the localStorageProxy is most likely what I need (I was relieved to discover I didn't have to serialise and deserialise the JSON store manually!) but after reading the documentation on it and trying and failing a few things I'm at a loss.

As it stands, it generates the localStorage… storage but it's empty, this I guess is because I haven't loaded anything into it but on doing app.stores.event_store.load(); the screen is blank and Console shows that the localStorage is empty with no errors.

My model:

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

My store:

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 probably stems from a lack of a fundamental understanding of how these models and stores interact but if anyone could help, good karma will be sent your way.

The full application can be found at it's GitHub repo.

-fetimo

Adam Marshall Adam Marshall · Accepted Answer · 2011-05-30T06:25:40

The TreeStore expects hierarchical data

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

But the LocalStorageProxy is unable to match the model for this data structure.

I would use an AJAX request to load the "store.js" file using the localStorage directly to "store" the data blob.

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

then your store will look something like this:

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

You just have to chain the events together correctly, as the async calls could trip you up

Getting the LocalStorageProxy working with a TreeStore

1 Answers