How do you reuse the stored data in localstorage in Sencha Touch?

Question

I am very new to Sencha Touch. I really like the product, but I'm having trouble getting through this problem. Please help. I've been at this for 3 days!!!

I was able to store the data in localstorage to reuse. But I am not able to reuse the data from the store in any other panels (or pages) and parameters in url. I can use the data like app.UserStore.getAt(0).get('id') by calling it in the event handler but not in the url's param or the value I assign.

Is this simply NOT possible to use app.UserStore.getAt(0).get('id') format anywhere else? If so, what are my options to get around this problem?

-- stored data in localstorage after login

 Ext.regModel('User', {
    fields: ['id', 'email'],

    proxy: { type: 'localstorage',  id: 'user-localstorage' }
 });

app.UserStore = new Ext.data.Store({
    model: 'User',
    storeId: 'ConfigStore',
    autoLoad: true
});

-- source for reusing data in localstorage (please check app.UserStore.getAt(0).get('id') in the source)

• I can see the stored data*

** I get an error due to this code. (the page doesn't display) **

initComponent: function(){

    var toolbarBase = {
        xtype: 'toolbar',
        title: 'Group Chat'
    };

       toolbarBase.items = [{ xtype: 'spacer', flex: 1 }, {
            iconCls: 'action',
            iconMask: true,
            scope: this,
            ui: 'plain',
            handler: function(){

                Ext.Msg.alert('Login Sucess', *app.UserStore.getAt(0).get('id')*, Ext.emptyFn);
            }
        }];


    this.dockedItems = toolbarBase;

    var searchModel = Ext.ModelMgr.getModel("Search");

    var search = new searchModel({
        query: **app.UserStore.getAt(0).get('id')**
    });

    var store = search.tweets();

    var tweetList = {
        cls: 'timeline',
        emptyText   : '<p class="no-searches">No Message Found</p>',

        disableSelection: true,

        store: store,

        plugins: [ {
            ptype: 'pullrefresh'
        }],

        itemCls: 'tweet',
        itemTpl: new Ext.XTemplate(
            '<div class="avatar"<tpl if="profile_image_url"> style="background-image: url({profile_image_url})"</tpl>></div>',
            '<div class="x-tweetanchor"></div>',
            '<div class="tweet-bubble">',
                '<div class="tweet-content">',
                    '<h2>{from_user}</h2>',
                    '<p>{text:this.linkify}</p><strong></strong>',
                    '<span class="posted">{created_at}</span>',
                '</div>',
            '</div>',
            {
                linkify: function(value) {
                    return value.replace(/(http:\/\/[^\s]*)/g, "<a target=\"_blank\" href=\"$1\">$1</a>");
                }
            }
        )
    };

    this.list = new Ext.List(Ext.apply(tweetList, {
        fullscreen: true
    }));

   this.listpanel = new Ext.Panel({
        layout: 'fit',
        items: this.list,
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            ui: 'gray', 
            items: [{
                xtype: 'textfield',
                placeHolder: 'Share your thoughts with your Peers',
                name: 'searchfield'
            }]
        }]
    });

    this.items = this.listpanel;
    this.list.store.load();

    app.views.ChatList.superclass.initComponent.call(this);
   }

Answer 1

How are you seeing the data? Are you using the debug console in something like Chrome? How are you saving the data?

You probably have stale data in your store. Performing a get('id') on an undefined object will result in your JavaScript error. You should issue a app.UserStore.load() command before trying to access data in the store (in this case, probably at the top of initComponent). This will load the data off the disk and ensure it is available to use. Having autoload specified only applies when the store is created.

Regarding the comment: If you add the new data through the store, instead of creating an object, that data will be in that store and therefore accessible without having to refresh.

var user = app.UserStore.add({email: 'a@b.com'});
user.save() //OR app.UserStore.sync();

So you won't have to refresh but you will have to perform a sync() on the store or save() on the model to make sure that the data is persisted.