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

In Part2 of this Post series, we are going to see creation of Model Class and store inorder to display the form fields from LocalStorage. If you haven't read Part1 of this Post series, please read that one.

Inorder to save the data in the Local Storage Using HTML5 LocalStorage API, we need to have a Model Class with fields and Store.

Create a Model View Class

First, we are going to create fields in the Model Class based on different field types present in the FormPanel Class in Part1 of this Post. Following is the FormPanel Class Code for your reference.

formPanelObj.add([
    {
        xtype : 'textfield',
        label : 'Username',
        placeHolder: 'Enter Username'
    },
    {
        xtype : 'passwordfield',
        label : 'Password'
    },
    {
        xtype: 'emailfield',
        label: 'Email',
        placeHolder: 'email@example.com'
    },
    {
        xtype: 'selectfield',
        label: 'country',
        labelWrap: true,
        options: [
        {
         text: 'United States',
         value: 'usa'
       },
       {
        text: 'United Kingdom',
        value: 'uk'
       },
       {
        text: 'India',
        value: 'india'
       },
       {
        text: 'Others',
        value: 'others'
       }
       ]
    },
    {
        xtype: 'fieldset',
        title: 'Gender',
        items: [
        {
            xtype: 'radiofield',
            label: 'Male',
            labelWrap: true,
            name: 'male',
            value: 'male',
            checked: true
        },
        {
            xtype: 'radiofield',
            label: 'Female',
            labelWrap: true,
            name: 'female',
            value: 'female'
        }]
    }
]);

Here is the Model Class with Fields that matches FormPanel Fields (Mentioned Above)

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

    config: {
        fields: [
            {
                name: 'id'
            },
            {
                name: 'fieldType',
                type: 'string'
            },
            {
                name: 'fieldLabel',
                type: 'string'
            },
            {
                defaultValue: '',
                name: 'fieldPlaceHolder',
                type: 'string'
            },
            {
                defaultValue: false,
                name: 'labelWrap',
                type: 'boolean'
            },
            {
                defaultValue: false,
                name: 'isChecked',
                type: 'boolean'
            },
            {
                defaultValue: '',
                name: 'fieldTitle',
                type: 'string'
            },
            {
                defaultValue: '',
                name: 'fieldName',
                type: 'string'
            },
            {
                defaultValue: '',
                name: 'fieldValue',
                type: 'string'
            }
        ]
    }
});

Create a Store View Class

Next, We are going to create a store and associate the above created model class to the Store and set the proxy type configuration to LocalStorage.

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

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

    config: {
        autoLoad: true,
        model: 'MyApp.model.FormModel',
        storeId: 'FormStore',
        proxy: {
            type: 'localstorage',
            id: 'formlocalstorage'
        }
    }
});

We have succesfully created Model Class with Store that matches the Fields Present in the Form Panel. In Next Post, we are going to see how to display the form fields dynamically from the LocalStorage.

Hope, you enjoyed this Post.

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 - Part3