Question

If got a sencha touch application, with a login form. For returning users, I would like to store the login credentials in the local storage.

User.js

App.models.User = Ext.regModel('User', {
    fields: [
         {
            name: 'username',
            type: 'string'
        }, {
            name: 'password',
            type: 'string'
        }
    ],

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

Users.js

App.stores.users = new Ext.data.Store({
    model: 'User',
    autoLoad: true
});

Now I try to sync the form values with local storage, how can I do that, what’s the activity flow for reading / getting it?

For reading I would do:

var model = new App.models.User();
users = App.stores.users.load();
if (users.data.length > 0 ) {
   model = users.getAt(0);
 } else {
   App.stores.users.create();
 }
 form.load(model);

Writing:

 form.model.set(form.data);
 form.model.save();
 App.stores.users.sync();

Somehow it looks too complicate to me (and it doesn’t work anyway). How would you solve the problem?

Answer 1

First make sure your saving the models right. For example do this:

var model = new App.models.User();
    model.data.username = 'theUser';
    model.data.password = 'thePass';
    model.save(); //the actual saving. Use chrome developer tools to see the local storage

Then load the model from the localstorage

users = App.stores.users.load();
model = users.getAt(0);

Check if the loaded model is OK and load that to the form with load(model)

The form could be like this:

new Ext.Application({
launch: function() {
    new Ext.form.FormPanel({
            id:'theForm',
            fullscreen: true,
            defaults: {
                labelAlign: 'top',
                labelWidth: 'auto',
            },
            items: [
                {
                    id : 'userName',
                    name : 'username',
                    label: 'Email',
                    xtype: 'emailfield',
                },
                {
                    id : 'userPassword',
                    name: 'password',
                    label: 'Password',
                    xtype: 'passwordfield',
                }
             ]
        });
     }
});

Then load the record like this Ext.getCmp('theForm').load(users.getAt(0));

To get the model from the form: Ext.getCmp('theForm').getRecord();