Home > DeveloperSection > Articles > Creating a Basic Form using Sencha Touch

Creating a Basic Form using Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
1 Comment(s)
 3518  View(s)
Rate this:

Creating a Basic Form using Sencha Touch

In this article, I’m explaining how to create a basic form in sencha touch.

All forms consists of one or more textfields and atleast a submit button with an event handler to validate and submit the form.

To create a form in Sencha Touch:

Step 1:  

Open Sencha Architect and drag-n-drop a form panel from toolbox to the canvas.

Ext.define('MyApp.view.FormPanel', {

    extend: 'Ext.form.Panel',

 

    config: {

    }

});

 

After dragging the form panel to the canvas, you can see the above code in the code section.

The Form Panel class extends the Ext.form.panel class, so all the properties of Ext.form.panel class will be accessible within our Form Panel class.

Step 2:

Drag-n-drop field set component from toolbox into the form panel and change its title to Registration Form.

The Field Set component is a container which can hold one or more textfields and basically it is used to group the textfields and it provides the grouping title,  gives your textfields round corners and margins between groups.

config: {

        items: [

            {

                xtype: 'fieldset',

                title: 'Registration Form',

                items: [

                    {

                        xtype: 'textfield', // Denotes the type of component

                        label: 'Username', // label of component

                        labelWrap: true, // Wraps the label

                        name: 'username', // Name of component

                        placeHolder: 'Enter Username' // Provides the watermark

                    },

                    {

                        xtype: 'textfield', // Denotes the type of component

                        label: 'Password', // label of component

                        labelWrap: true, // Wraps the label

                        name: 'password', // Name of component

                        placeHolder: 'Enter Password' // Provides the watermark

                    }               

                ]

            }

        ]

    }

 

After adding the field set, give title “Registration Form” and add properties to textfields like above.

Step 3:

Now add an emailfield, urlfield and a textfield to the fieldset Registration Form by simply drag-n-drop to the field set and set the properties of these fields like this:

                     {

                        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: 'textfield',

                        label: 'About You',

                        labelWrap: true,

                        name: 'aboutyou',

                        placeHolder: 'Write About Yourself'

                    }

 

  Step 4:

Now all the textfields are set to the form with their properties, next add a button to the form.

Add a button from toolbox by simply drag-n-drop to the Form Panel  and set the properties like this :

            {

                xtype: 'button',

                itemId: 'save',

                width: '40%',

                text: 'Save'

            }

 

Now save your project with a particular name and run it either in google chrome or safari browser.

The Final Code

Ext.define('MyApp.view.FormPanel', {

    extend: 'Ext.form.Panel',

 

    config: {

        items: [

            {

                xtype: 'fieldset',

                title: 'Registration Form',

                items: [

                    {

                        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: 'textfield',

                        label: 'About You',

                        labelWrap: true,

                        name: 'aboutyou',

                        placeHolder: 'Write About Yourself'

                    }

                ]

            },

            {

                xtype: 'button',

                itemId: 'save',

                width: '40%',

                text: 'Save'

            }

        ]

    }

});

Output

Creating a Basic Form using Sencha Touch

 


Nice article

By Johnny Depp on   3 years ago
Nice article

Don't want to miss updates? Please click the below button!

Follow MindStick