How to dynamically add fields to the Form in Sencha Touch 2 - Part3

In Part3 of this Post Series, we are going to see how we can store the different fields into browser local storage using HTML5 Local Storage API and display the fields from the local storage. If you haven't read the following previous post. Please read first and proceed furthur.

How to dynamically add fields to the Form in Sencha Touch 2 - Part1
How to dynamically add fields to the Form in Sencha Touch 2 - Part2

Add Form Fields into Local Storage

I am going to create the FormModel instance with hardcoded field values for the various fields (TextField, PasswordField, EmailField, SelectField and RadioField) using Ext.create(). Then, I am adding all the FormModel instance into the store using add(). Finally sync() is used to sync the store record into Browser Local Storage.

var FormStore = Ext.getStore('FormStore');

var frmModel = Ext.create('MyApp.model.FormModel',{
    fieldType: 'textfield',
    fieldLabel: 'Username',
    fieldPlaceHolder: 'Enter Username'
});

var frmModel1 = Ext.create('MyApp.model.FormModel',{
    fieldType: 'passwordfield',
    fieldLabel: 'Password'
});

var frmModel2 = Ext.create('MyApp.model.FormModel',{
    fieldType: 'emailfield',
    fieldLabel: 'Email',
    fieldPlaceHolder: 'email@example.com'
});

var frmModel3 = Ext.create('MyApp.model.FormModel',{
    fieldType: 'selectfield',
    fieldLabel: 'country',
    labelWrap: true,
    fieldValue: "United States:usa,United Kingdom:uk,India:india,Others:others"
});

var frmModel4 = Ext.create('MyApp.model.FormModel',{
    fieldType: 'radiofield',
    fieldLabel: 'Male',
    fieldName: 'male',
    labelWrap: true,
    isChecked: true,
    fieldValue: 'male',
    fieldTitle: 'Gender'
});

var frmModel5 = Ext.create('MyApp.model.FormModel',{
    fieldType: 'radiofield',
    fieldLabel: 'Female',
    fieldName: 'female',
    labelWrap: true,
    fieldValue: 'female',
    fieldTitle: 'Gender'
});

FormStore.add([frmModel,frmModel1,frmModel2,frmModel3,frmModel4,frmModel5]);

FormStore.sync();

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.

Display the Form Field from Local Storage

First, we are going to get the registered store and formpanel class using Ex.getCmp() and Ext.getStore() methods. Then we are going to get the record from the LocalStorage Store by looping and calling the respective field  method based on fieldType.

var formPanelObj = Ext.getCmp('myformpanel');
var localFormData = Ext.getStore('FormStore').load();

var formFields = [],count = 0,radioArray = [];
var self = this;

Ext.each(localFormData.data.items, function(record){

    if((record.data.fieldType == 'textfield') || (record.data.fieldType == 'passwordfield') || (record.data.fieldType == 'emailfield')){
             
        var fieldObj = self.getDefaultField(record);
        formFields.push(fieldObj);

    }else if(record.data.fieldType == 'selectfield'){

        var fieldObj = self.getDropdownField(record);
        formFields.push(fieldObj);

    }else if(record.data.fieldType == 'radiofield'){
       
        radioArray.push(record);
          //we need to get the next record and check if it is radio field.
        var tmpCount = count;tmpCount++;
        var tmpRecord = localFormData.data.items[tmpCount];

        if( tmpRecord !== null && tmpRecord !== undefined && tmpRecord.data.fieldType == 'radiofield'){

         //get the next radio field record for grouping
        }else{
          // send the radio field arrays for field generate
            var fieldObj = self.getRadioField(radioArray);
            formFields.push(fieldObj);
            radioArray = [];
        }
    }

    count++;

});

Finally, add the different fields into the FormPanel using add().

formPanelObj.add(formFields);

Implementation for various Field Methods

This method will generate the default field Objects (TextField, PasswordField, EmailField) with their configuration options based on the local storage records.

getDefaultField: function(record){

         var objects = {};
         objects.xtype = record.data.fieldType;
         objects.label = record.data.fieldLabel;

         if(record.data.fieldPlaceHolder != ''){
          objects.placeHolder = record.data.fieldPlaceHolder;
         }

         if(record.data.labelWrap){
          objects.labelWrap = record.data.labelWrap;
         }

         if(record.data.fieldValue !== ''){
          objects.value = record.data.fieldValue;
         }

         return objects;
}

This method will generate the DropDown field Objects with their configuration options based on the local storage records.

getDropdownField: function(record){

         var objects = {};
         objects.xtype = record.data.fieldType;
         objects.label = record.data.fieldLabel;

         if(record.data.fieldPlaceHolder !== ''){
          objects.placeHolder = record.data.fieldPlaceHolder;
         }

         if(record.data.labelWrap){
         objects.labelWrap = record.data.labelWrap;
         }

         if(record.data.fieldValue !== ''){
             var data = record.data.fieldValue;
             var splitArray = data.split(',');
             var optionArray = [];
             for(var i = 0; i < splitArray.length; i++)
             {
                 var innerData = splitArray[i].split(':');
                 var _obj = {};
                 _obj.text = innerData[0];
                 _obj.value = innerData[1];
                 optionArray[i] = _obj;
            }
            objects.options = optionArray;
         }

         return objects;
}

This method will generate the Radio field Objects with their configuration options based on the local storage records.

getRadioField: function(records){

   var objects = {} , radioItems = [];
   objects.xtype = 'fieldset';
   objects.title = records[0].data.fieldTitle;

   Ext.each(records,function(record){
       var object = {};
       object.xtype = record.data.fieldType;
       object.label = record.data.fieldLabel;

       if(record.data.fieldPlaceHolder !== ''){
        object.placeHolder = record.data.fieldPlaceHolder;
       }

       if(record.data.labelWrap){
        object.labelWrap = record.data.labelWrap;
       }

       if(record.data.fieldValue !== ''){
        object.value = record.data.fieldValue;
       }

       if(record.data.fieldName !== ''){
        object.name = record.data.fieldName;
       }

       if(record.data.isChecked){
        object.checked = record.data.isChecked;
       }

       radioItems.push(object);

       });

       objects.items = radioItems;
       return objects;
}

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

I hope, you enjoyed this Post Series.

Download the Source Code Here