Wednesday, 15 May 2013

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

14 comments:

  1. Hi,
    your post has been very helpful for completion of my project.
    hope to see part4 soon.
    Can you Please upload your source code too

    ReplyDelete
    Replies
    1. Thanks for your appreciation Surhid, I will add the source code link for this Post Soon. Thanks

      Delete
    2. Good to hear.
      Hope this will solve problem of many people who are starting Sencha.
      Thanks for your support.

      Delete
  2. Surhid, I attached the source code for this post. Thanks

    ReplyDelete
  3. When are we gonna see part4??

    ReplyDelete
    Replies
    1. Right now, i am busy with my project work. i will add the part 4 of this series by end of this week. Thanks.

      Delete
  4. Could you help me, How to make dynamic url using store. Here is the my problem :http://stackoverflow.com/questions/17825697/how-to-set-dynamic-url-in-sencha-touch-using-store

    ReplyDelete
    Replies
    1. You need to have this code

      var value = 100;
      var store = Ext.getStore('storeId');
      var formURL = "http://domain.com/test.php?id="+value;
      store.getProxy().setUrl(formURL);

      Hope, this helps. Thanks

      Delete
  5. I put the onFormSave function in controller, validataion is working properly but while saving it throws

    Uncaught TypeError: Cannot call method 'add' of undefined

    ReplyDelete
  6. Hi Sathish,

    The issue here is, Sencha can't able to access Store using 'StoreId'. Please make sure, you are accessing store with the correct 'StoreId'.

    Thanks
    Suresh Ariya

    ReplyDelete
  7. Hello,

    I am new in Sencha...I just download your code...when fill all fields ad say Save...get error in console like: has no method 'getStore' line 103
    Code on line 103 is: var userStore = Ext.getStore('userstore');

    So please help.

    Thanks,
    Mandar.

    ReplyDelete
    Replies
    1. Please check whether 'Ext' namespace is set as autloader in app.js file. Something like this

      Ext.Loader.setConfig({
      Ext : 'touch/src' // sencha touch SDK path
      });

      Thanks and Regards,
      Suresh Ariya

      Delete
  8. hi suresh,

    i have almost done .....please tell me where i see my save data in local storage.???
    currently using firefox for run code windows 8.1

    best regards,
    Maria nafees

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...