Save Form Data Locally using Sencha Touch LocalStorage - Part3

In Part1, We have seen how to create a basic HTML Form using Sencha Touch. In Part2, We have seen how to create model and apply model validation to the Form. Today, we are going to see, how we can store the form data Locally using HTML5 LocalStorage API.

Create a User Store
First, We need to create a store with class name and alias name as 'UserStore'. Then, we need to set the Model for this Store as 'MyApp.model.User' that we created in part2 of this Post series and StoreId is set to 'userstore'.

Using Proxy configuration, We are going to set type property as 'localstorage' and id property set to 'userstoreproxy'.

Ext.define('MyApp.store.UserStore', {
    extend: 'Ext.data.Store',
    alias: 'store.UserStore',

    requires: [
        'MyApp.model.User'
    ],

    config: {
        model: 'MyApp.model.User',
        storeId: 'userstore',
        proxy: {
            type: 'localstorage',
            id: 'userstoreproxy'
        }
    }
});

Save the Form Data Locally

Now, we are going to save the form data locally using store. First, we need to get the above registered store using Ext.getStore() with StoreId configuration. Then, we need to add the Model records to the store using add() method. Finally we need to sync the store records with the Local Storage using sync() method.

onFormSave: function(button,e,options){

var formObj = button.up('FormPanel');
var formData = formObj.getValues();

var usr = Ext.create('MyApp.model.User',{
     username: formData.username,
     password: formData.password,
     email:formData.email,
     website:formData.website,
     aboutyou: formData.aboutyou
});

var errs = usr.validate();
var msg = '';

if (!errs.isValid()) {

   errs.each(function (err) {
   msg += err.getField() + ' : ' + err.getMessage() + '<br/>';
   });

   Ext.Msg.alert('ERROR', msg);

} else {

   var userStore = Ext.getStore('userstore');
   userStore.add(usr);
   userStore.sync();
   Ext.Msg.alert('SUCCESS', 'Data Saved to Local Storage Successfully');

}
}

Following is the output, when i run this code in Google Chrome.

You can able to view the form data stored in Browser Local Storage using Firebug, Click Resources Tab then select "Local Storage" in Left Column.

Hope, you enjoyed this Post.

In Part4 of this Post Series, we are going to see how we can implement both New and Edit Feature using the Single Form.

• Part1 - How to create a basic form using Sencha Touch 2
• Part 2 - Apply Model Validation to the Form using Sencha Touch 2
• Part4 - How to implement Add/Edit Feature in single form

Download the Source Code Here