- Sencha Touch Tutorial
- Sencha Touch - Home
- Sencha Touch - Overview
- Sencha Touch - Environment
- Sencha Touch - Naming Convention
- Sencha Touch - Architecture
- Sencha Touch - MVC Explanation
- Sencha Touch - First App
- Sencha Touch - Build Application
- Sencha Touch - Migration Steps
- Sencha Touch - Core Concepts
- Sencha Touch - Data
- Sencha Touch - Theme
- Sencha Touch - Device Profile
- Sencha Touch - Dependencies
- Environment Detection
- Sencha Touch - Events
- Sencha Touch - Layout
- Sencha Touch - History & Support
- Sencha Touch - Upload & Download
- Sencha Touch - View Components
- Sencha Touch - Packaging
- Sencha Touch - Best Practice
- Sencha Touch Useful Resources
- Sencha Touch - Quick Guide
- Sencha Touch - Useful Resources
- Sencha Touch - Discussion
Sencha Touch - Form
Description
This is to create form view.
Syntax
Following is the simple syntax to add form.
Ext.create('Ext.Form', {})
Example
Following is a simple example showing the usage.
<!DOCTYPE html> <html> <head> <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" /> <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"> </script> <script type = "text/javascript"> Ext.application({ name: 'Sencha', launch: function() { var formPanel = Ext.create('Ext.form.Panel', { fullscreen: true, items: [{ xtype: 'fieldset', items: [ { xtype: 'textfield', name : 'name', label: 'Name' }, { xtype: 'emailfield', name : 'email', label: 'Email' }, { xtype: 'passwordfield', name : 'password', label: 'Password' } ] }] }); formPanel.add({ xtype: 'toolbar', docked: 'bottom', layout: { pack: 'center' }, items: [ { xtype: 'button', text: 'Set Data', handler: function() { formPanel.setValues({ name: 'Seth', email: 'seth@sencha.com', password: 'secret' }); } }, { xtype: 'button', text: 'Get Data', handler: function() { Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(),null, 2)); } }, { xtype: 'button', text: 'Clear Data', handler: function() { formPanel.reset(); } } ] }); } }); </script> </head> <body> </body> </html>
This will produce following result −
sencha_touch_view_components.htm
Advertisements