Chapter 6. Ext JS takes form

We just finished exploring how to organize UI widgets with the various layout managers in the Ext framework. From here, we’ll spring into learning how to instantiate and manage Ext JS form elements. After all, what’s any application without user input?

It should be no surprise to hear 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 TextArea input field, the user would have to write the HTML content by hand. This isn’t required with the Ext JS HtmlEditor, where you get a full WYSIWYG input field, allowing the user to input and manipulate richly formatted HTML easily.

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

6.1. The TextField

6.2. TypeAhead with the ComboBox

6.3. WYSIWhat?

6.4. Selecting a date

6.5. Checkboxes and Radios

6.6. The FormPanel

6.7. Data submission and loading

6.8. Summary