Sencha Touch 2 Up and Running

Chapter 5. Forms

Forms are a fundamental element to enable interactivity in data-driven business applications; Sencha Touch builds upon the latest features of HTML5 to provide advanced support for forms.

This chapter will describe in detail all the different types of fields that you can use in your forms, and how you can enable your mobile users to enter and modify data in your applications.

Form Panels

Forms in Sencha Touch have a very simple architecture: an instance of Ext.form.Panel holds one of many Ext.form.Fieldset instances, and each fieldset can contain one or more instances of any of the available subclasses of Ext.field.Field. (See Figure 5-1 for an example of Sencha Touch form structure.)

The available types of fields in Sencha Touch are described in Table 5-1, including their common class names and their xtypes.

Table 5-1. Sencha Touch form classes and xtypes

xtype	Class
fieldset	Ext.form.FieldSet
field	Ext.field.Field
checkboxfield	Ext.field.Checkbox
datepickerfield	Ext.field.DatePicker
emailfield	Ext.field.Email
hiddenfield	Ext.field.Hidden
numberfield	Ext.field.Number
passwordfield	Ext.field.Password
radiofield	Ext.field.Radio
searchfield	Ext.field.Search
selectfield	Ext.field.Select
sliderfield	Ext.field.Slider
spinnerfield	Ext.field.Spinner
textfield	Ext.field.Text
textareafield	Ext.field.TextArea
togglefield	Ext.field.Toggle
urlfield	Ext.field.Url

Figure 5-1. Sencha Touch form structure

Figure 5-2 shows ...