Chapter 6. Forms in Ext JS

You just learned how to organize UI widgets with the various layout managers in the Ext JS framework. From here we’ll spring into instantiating and managing Ext JS form elements. What’s an application without user input?

It should be no surprise that developing and designing forms is a common task for web developers. Managing form validation is what JavaScript was mainly used for just a few years ago. Ext JS goes beyond typical form validation, building on the basic HTML input fields to both add features for the developer and enhance the user experience. For instance, let’s say a user is required to enter HTML into a form. Using an out-of-the-box text area input field, the user would have to write the HTML content by hand. This isn’t required with the Ext JS HTML Editor, where you get a full WYSIWYG input field, allowing the user to input and manipulate richly formatted HTML easily.

In this chapter we’ll investigate the form panel, and you’ll learn about many of the Ext JS form input classes. You’ll also see how to build on what you know about layouts and the Container model to construct a complex form and use that implementation to submit and load the data via Ajax.

6.1. Basic input fields

6.2. Type-ahead with the ComboBox

6.3. The time field

6.4. The HTML Editor

6.5. Selecting a date

6.6. Checkboxes and radio buttons

6.7. The form panel

6.8. Data submission and loading

6.9. Summary