1. #1
    Ext User
    Join Date
    May 2010
    Posts
    2
    Vote Rating
    0
    jonathanstark is on a distinguished road

      0  

    Default Questions about Models, Stores, and dynamic Lists

    Questions about Models, Stores, and dynamic Lists


    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...

    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
    });

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,146
    Vote Rating
    673
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    May 2010
    Posts
    2
    Vote Rating
    0
    jonathanstark is on a distinguished road

      0  

    Default


    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.

    Code:
    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
    });

Similar Threads

  1. Stores and Models
    By dombroskib in forum Sencha Touch 1.x: Discussion
    Replies: 14
    Last Post: 6 Jan 2011, 12:44 PM
  2. Help with stores and lists.
    By oskars in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 6 Jul 2010, 1:36 PM
  3. Stores, sub-stores & filters - help
    By Bobbin in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 15 Nov 2009, 1:10 PM
  4. Loading dynamic grid stores in windows
    By neenhouse in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 4 Dec 2007, 11:50 AM

Thread Participants: 1

Tags for this Thread