Hands-On Sencha Touch 2

Chapter 12. Forms

I have a love/hate relationship with forms. I love them, because they look so great. Some components feel really nice on a touch device. Thanks to HTML5, some fields are recognized by (mobile) browsers and therefore present a correct device keyboard. But I hate them too because I don’t want to enter a lot of data—especially not when I am traveling and need to look things up quickly. In general, people don’t like to write whole books on a mobile phone. The screen is too small and therefore hard to read. The keyboards on touch devices are often too small for your fingers, and the feedback for pressing the keys is often too poor. It’s just not like a physical keyboard, like on your desktop or laptop computer. That’s why I always try to limit textarea fields on mobile applications.

However, Sencha Touch does a really good job with form fields (see Figures 12-1 and 12-2). Some form fields really feel good on a touch device. Now it is up to you to choose the best form fields for your user input. Every form field in Sencha Touch extends from Ext.field.Field.

Ext.field.Field is the base class for all form fields used in Sencha Touch. It’s an input field and a label all in one key/value pair. Every form field should have a unique name (the key) and can have a value (the user input). It provides a lot of shared functionality to all field subclasses (simple validation, clearing, and tab index management), but is rarely used directly. See Table 12-1 for an overview of all form ...