How to implement Add/Edit Feature in single form using Sencha Touch 2

In Part 4 of this Post Series, we are going to see how we can use single Sencha Touch form for both add and edit feature. If you are new to this Post Series, Please read the previous post. Following are those

• Part 1 - How to create a basic form using Sencha Touch 2.
• Part 2 - Apply Model Validation to the Form using Sencha Touch 2.
• Part3 - Save Form data locally using local storage in Sencha Touch 2.

We are going to use the User Model Class that we have already created in Part2 of this Post Series. We are going to add one additional field with name id which is used to differenciate between add and edit form.

Ext.define('MyApp.model.User',{
     extend: 'Ext.data.Model',
     alias: 'model.User',

       config: {
           fields: [
           {
              name: 'id'
           },
           {
              name: 'username'
           },
           {
              name: 'password'
           },
            {
              name: 'email'
           },
           {
              name: 'website'
           },
            {
              name: 'aboutyou'
           }
           ],
           validations: [
           {
              type: 'presence',
              field: 'username'
           },
           {
              type: 'presence',
              field: 'password'
           },
           {
              type: 'presence',
              field: 'email'
           },
           {
              type: 'presence',
              field: 'website'
           },
           {
              type: 'format',
              field: 'username',
              matcher: /[0-9A-Za-z]{6,15}/,
              message: 'Username should be alphanumeric'
           },
            {
              type: 'length',
              field: 'password',
              min: 6,
            message: 'Password must contain min 6 characters'
           },
            {
              type: 'email',
              field: 'email',
            message: 'Email format is invalid'
           }]
     }
});

Then, we are going to  use to Login Form that we have already created in part1 of this Post Series. We are going to add one hidden field with name id which is used to differenciate between add and edit form.

Ext.define('MyApp.view.FormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.FormPanel',

    config: {
        itemId: 'registrationform',
        items: [
            {
                xtype: 'fieldset',
                title: 'Registration Form',
                items: [
                      {
                        xtype: 'hidden',
                        name: 'id'
                    },
                    {
                        xtype: 'textfield',
                        label: 'Username',
                        labelWrap: true,
                        name: 'username',
                        placeHolder: 'Enter Username'
                    },
                    {
                        xtype: 'textfield',
                        label: 'Password',
                        labelWrap: true,
                        name: 'password',
                        placeHolder: 'Enter Password'
                    },
                    {
                        xtype: 'emailfield',
                        label: 'Email',
                        labelWrap: true,
                        name: 'email',
                        placeHolder: 'email@example.com'
                    },
                    {
                        xtype: 'urlfield',
                        label: 'Website',
                        labelWrap: true,
                        name: 'website',
                        placeHolder: 'http://example.com'
                    },
                    {
                        xtype: 'textareafield',
                        label: 'About You',
                        labelWrap: true,
                        name: 'aboutyou',
                        placeHolder: 'Tel me about yourself'
                    }
                ]
            },
            {
                xtype: 'button',
                itemId: 'save',
                width: '30%',
                text: 'Save'
            }
        ]
    }
});

Following is the HTML form that will be rendered in Google Chrome,

How to apply Add/Edit while Saving Form Data

This onFormSave() method will be trigged when you click on save button. The scope of this article is to differenciate between add and edit form. If you need to know, how to attach event listeners to form, apply validation and store form data locally, Please refer previous post series.

onFormSave: function(button,e,options){

   var formObj = button.up('FormPanel');
   var userStore = Ext.getStore('userstore');
   var formData = formObj.getValues();

   if(formData.id === null) {//add form

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

     userStore.add(usr);

   } else {//edit form

      var usr = userStore.getById(formData.id);
      usr.set('username', formData.username);
      usr.set('password', formData.password);
      usr.set('email', formData.email);
}

userStore.sync();

First, using getValues() method we are getting the Login form values, then we are checking whether id field is null. if yes, then we are coming from add form. so we are adding the form data to the store using add().

If id field is not null, we are from edit form. so we are updating the model records using update(). Finally sync() method is used  to sync the store records with the Local Storage.

Hope, you enjoyed this Post Series. Please let me know your feedbacks through Comments. Thanks.