View Full Version : Getting the LocalStorageProxy working with a TreeStore

28 May 2011, 3:24 AM
Greetings fellow Sencharians,

I have built my app using 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.

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.

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(); it returns 'No items available' but drilling down into the objects, they're all still there, also Console shows that the localStorage is empty with no errors (see image).

N.B. eventsAttending is the localStorage store we're interested in here

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'


The full application can be found at http://github.com/fetimo/Schedlr

Edit: Trying stuff in the Console, any function that should be part of the Store returns undefined, e.g.
Schedlr.stores.event_store.add({title:'test',info:'abc',attend:true}); returns "TypeError: Result of expression 'Schedlr.stores.event_store.add' [undefined] is not a function." =/

31 May 2011, 6:29 PM
At the moment, all of the Proxies (like LocalStorageProxy) deal with flat arrays of data (e.g. a normal Store, not a TreeStore). Adding hierarchical storage functionality is probably non-trivial at this point...

1 Jun 2011, 4:24 AM
At the moment, all of the Proxies (like LocalStorageProxy) deal with flat arrays of data (e.g. a normal Store, not a TreeStore). Adding hierarchical storage functionality is probably non-trivial at this point...

I created a workaround that took the leaf data from the TreeStore and added it in a separate, localStorage store, so all the information is still available but like you say, it's stored as a flat array, despite this, it's a solution that works well for my app.

5 Jun 2011, 4:27 AM
Hello fetimo,
Could you send me some guidelines on how to achieve what you comment?
I have the same problem and cannot find the way to make it work...
Best regards.

5 Jun 2011, 6:53 AM
Hey Alex,

The entire application is at https://github.com/fetimo/Schedlr so if you find the following doesn't help, you can have a look at that and see if it makes any more sense!

First, the main store has an ajax proxy and has
autoLoad: true; autoSave: true;

Then, the one that is populated is setup like so:

Schedlr.stores.attending_store = new Ext.data.Store({
model: 'Event',
autoLoad: true,
autoSave: true,
proxy: {
type: 'localstorage',
id: 'attending_localstore',
model: 'Event'

Afterwards, when the user clicks a button it calls a handler that does the following:


You can check that this has added it to your store by opening a Console and type localStorage and see all the stores it creates, I'm sure there's a better way to do this but it's the best I was able to come up with on a short deadline :)

Hope that helps!

7 Jun 2011, 7:00 AM
Thanks a lot Fetimo, I'll give it a go.
The fact that local stores do not support hyerarchical data structures is a pain in the neck....
But the library is a gem in itself, one has to admit that.

7 Jun 2011, 7:15 AM
It is a pain, but Web Storage is in it's infancy and I'm sure we're just scratching the surface with it!

Another approach for this would be to manually stringify the JSON of your tree store and then localStorage.setItem it, I tried this but didn't have valid JSON so it didn't work but if you do have valid code then it should be ok (hopefully, maybe!).

Best of luck :)