PDA

View Full Version : Questions about Models, Stores, and dynamic Lists



jonathanstark
9 Aug 2010, 2:28 PM
Hi all -

I have an iPad app that has multiple pages of content, and two buttons in the top toolbar: "Add Bookmark" and "Show Bookmarks".

"Add Bookmark" appends the current page number to a stringified object in localStorage.

"Show Bookmarks" toggles an overlay that displays the saved bookmarks in a vertically scrolling List.

I'm guess that the proper way to set this up is to define a bookmark model, create a bookmark store, and bind the store to the List.

I have successfully set up a List overlay that is bound to a Store (which contains hardcoded data), but I can't figure out how to set it up to be dynamic. Some questions:

- Is binding a List/NestedList to a data Store the correct approach?
- What is the appropriate way to add/remove items from the store?
- If I modify the contents of the Store, will the List automatically update? Or do I need to explicitly refresh/reload it?
- I'm manually storing the added bookmarks in localStorage. Do I need to do that? Or does Store handle persistence for me automatically?

TIA,
j

P.S. Here's the relevant code...



var bookmarks;
try {
bookmarks = JSON.parse(localStorage.bookmarks);
} catch(e) {
bookmarks = {items:[]};
}
Ext.regModel('Bookmark', {
fields: ['pageNumber']
});
var bookmarksOverlay = new Ext.List({
centered: false,
floating: true,
grouped: false,
height: 350,
indexBar: false,
itemSelector: 'div.bookmark',
modal: false,
singleSelect: true,
store: new Ext.data.Store({
model: 'Bookmark',
sorters: 'pageNumber',
data: bookmarks.items
}),
tpl: '<tpl for="."><div class="bookmark"><strong>{pageNumber}</strong> <span class="delete bookmark">Delete</span></div></tpl>',
width: 350
});

evant
10 Aug 2010, 3:38 AM
1) Yes
2) You can either reload the data set, or you can use the methods on the store, such as add and remove.
3) Automatically, the view has listeners on the store.
4) Yes, you need to store them yourself.

jonathanstark
10 Aug 2010, 8:54 AM
Thanks! That helped get me closer. I've got the Store, Model, and List connected and now I'm trying to figure out how to save to the LocalStorageProxy. I tried the autoSave config option and the sync() method for the Store but neither seems to do anything. I don't see what I'm doing wrong (code below). TIA for any input on this.




Ext.regModel('Bookmark', {
fields: [
{name:'pageNumber', type:'number'}
]
});

var bookmarkProxy = new Ext.data.LocalStorageProxy({
id:'bookmarks'
});

var bookmarkStore = new Ext.data.Store({
model: 'Bookmark',
proxy: bookmarkProxy,
autoSave: true // This doesn't seem to do anything
});

bookmarkStore.on('datachanged', function(){
bookmarkStore.sync(); // This doesn't seem to do anything
alert('Changes saved?');
});

var bookmarkCurrentPage = function(button, event) {
bookmarkStore.add({'pageNumber': currentPageNumber});
};

var clearBookmarks = function(button, event) {
localStorage.removeItem('bookmarks');
};

var bookmarksOverlay = new Ext.List({
centered: false,
floating: true,
grouped: false,
height: 350,
indexBar: false,
itemSelector: 'div.bookmark',
modal: false,
singleSelect: true,
store: bookmarkStore,
tpl: '<tpl for="."><div class="bookmark"><strong>{pageNumber}</strong> <span class="delete bookmark">Delete</span></div></tpl>',
width: 350
});