Ext JS provides many widgets that we can use to collect and edit data in our forms. You are going to learn about the most useful widget and configurations that you can use to create beautiful forms. Some of the fields we are going to see are as follows:

The fields that we are going to cover are the basic ones. Ext JS provides many more fields, which can be seen in the Ext JS examples, and also many of them are based on subclasses from these. For the following examples, we are going to create a class that extends from the Form class and holds the fields that we are going to explain in detail later on:

Ext.define('Myapp.view.AvailableFields01', {
  extend: 'Ext.form.Panel',
  alias: 'widget.availablefields01',
  requires: ['Ext.form.*'],
  height: 280,
  width:448,
  bodyPadding: 6,
  title: 'Available Fields',
  defaultType:'textfield',
  defaults:{
    anchor:'-18',
   ...