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

As requested by one of my reader, today we are going to see how we can dynamically add fields to the Form Panel.  The Fields will be TextField, SelectField, EmailField and radioField. Now, we will see the implementation.

Create a Form Panel View

First, we are going to create a FormPanel class with name MyFormPanel and config property id and itemId with value myformpanel.

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

    config: {
        id: 'myformpanel',
        itemId: 'myformpanel'
    }
});

Dynamically Add Fields to Form

Next, we are getting the reference of the above FormPanel class using id config property.

var formPanelObj = Ext.getCmp('myformpanel');

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'
        }]
    }
]);

Then, we dynamically add the TextField, SelectField and Radio Field with their configuratiions to the FormPanel using add().

Here is the Final Output, When i run the above code in Google Chrome

Hope, you enjoyed this Post.

In Next Post, we are going to see how we can store the form fields in LocalStorage and display the fields from Local Storage if exist.

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