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
Johnny Depp
12-Nov-2013