Ext.js - Form

---

---

In most of the web applications, forms are the most important widget to get the information from the user such as login form/feedback form so that the value can be saved in the database for future reference. Form widget is used for this purpose.

Before creating a form, we should know about xTypes.

xType defines the type of Ext JS UI component, which is determined during rendering of the component. For example, the element can be a textbox for which we have xType as textField or the element can have a numeric value only for which we have Numeric xType.

Different Types of xType

TEXTFIELD

This xType is to represent a text field, where the user can enter a value. Ext JS class for textfield is 'Ext.Form.Field.Text'.

{ 	
   xtype: 'textfield',
   fieldLabel: 'Text field'  
} 

TEXT AREA

This is to represent a text area. Ext JS class for this is 'Ext.form.field.TextArea'.

{
   xtype: 'textarea',
   fieldLabel: 'Text Area'
}

DISPLAY FIELD

This is to represent a display text field. Ext JS class for this is 'Ext.form.Label'.

{
   xtype: 'displayfield',
   fieldLabel: 'Display Field''
}

DATE FIELD

This is to represent a date field which has the date picker to select the date. Ext JS class for this is 'Ext.form.field.Date'.

{
   xtype: 'datefield',
   fieldLabel: 'Date picker'
}

BUTTON

This is to represent a button. Ext JS class for this is 'Ext.button.Button'.

{
   xtype: 'button', 
   text : 'Button'
}

RADIO FIELD

This is to represent a radio field, where we can select any one among the all radio buttons or it can be customized to select multiple at a time. Ext JS class for this is 'Ext.form.field.Radio'.

{
   xtype      : 'fieldcontainer',
   fieldLabel : 'Radio field',
   defaultType: 'radiofield',
   defaults: {
      flex: 1
   },
   layout: 'hbox',
   items: [{
      boxLabel  : 'A',
      inputValue: 'a',
      id        : 'radio1'
   },{
      boxLabel  : 'B',
      inputValue: 'b',
      id        : 'radio2'
   },{
      boxLabel  : 'C',
      inputValue: 'c',
      id 	      : 'radio3'
   }]
}

CHECKBOX FIELD

This is to represent a checkbox field, where we can select multiple values at a time. Ext JS class for this is 'Ext.form.field.Checkbox'.

{
   xtype: 'fieldcontainer',
   fieldLabel: 'Check Box Field',
   defaultType: 'checkboxfield',
   items: [{
      boxLabel  : 'HTML',
      inputValue: 'html',
      id        : 'checkbox1'
   },{
      boxLabel  : 'CSS',
      inputValue: 'css',
      checked   : true,
      id        : 'checkbox2'
   },{
      boxLabel  : 'JavaScript',
      inputValue: 'js',
      id        : 'checkbox3'
   }]
}

COMBO BOX

This is to represent a combo box. Combo box contains a list of items. Ext JS class for this is 'Ext.form.field.ComboBox'.

{
   xtype : 'combobox',
   fieldLabel: 'Combo box',
   store: store,
   valueField: 'name'
}

// store for drop down values
var store = Ext.create('Ext.data.Store', {
   id : 'statesid',
   fields: ['abbr', 'name'],
   data : [
      {"abbr":"HTML", "name":"HTML"},
      {"abbr":"CSS", "name":"CSS"},
      {"abbr":"JS", "name":"JavaScript"}
   ]
});

TIME FIELD

This is to represent a time field, where max and min time value can be predefined. Ext JS class for this is 'Ext.form.field.Time'.

{
   xtype: 'timefield',
   fieldLabel: 'Time field',
   minValue: '6:00 AM',
   maxValue: '8:00 PM',
   increment: 30,
   anchor: '100%'
}

FILE FIELD

This is to represent a file upload field where we can browse and upload files. Ext JS class for this is 'Ext.form.field.File'.

{
   xtype: 'filefield',
   fieldLabel: 'File field',
   labelWidth: 50,
   msgTarget: 'side',
   allowBlank: false,
   anchor: '100%',
   buttonText: 'Select File...'
}

SPINNER

This is to represent a spinner field, where the list can be spin and added. Ext JS class for this is 'Ext.form.field.Spinner'.

{ 
   xtype: 'spinnerfield',
   fieldLabel: 'Spinner field'
}

NUMERIC FIELD

This is to represent a Numeric field, where we can have max and min value predefined. Ext JS class for this is 'Ext.form.field.Number'.

{
   xtype: 'numberfield',
   anchor: '100%',
   fieldLabel: 'Numeric field',
   maxValue: 99,
   minValue: 0
}

HIDDEN FIELD

As the name explains, this xtype is to keep values hidden.

{
   xtype: 'hiddenfield',
   value: 'value from hidden field'
}

Syntax for Form Panel

Following is a simple syntax to create a form.

Ext.create('Ext.form.Panel');

Example

Following is a simple example showing form with all the xTypes.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.form.Panel', {
               id: 'newForm',
               renderTo: 'formId',
               border: true,
               width: 600,
               
               items: [{
                  xtype: 'textfield',
                  fieldLabel: 'Text Field'
               },{
                  xtype: 'displayfield',
                  fieldLabel: 'Display Field'
               },{
                  xtype: 'textarea',
                  fieldLabel: 'Text Area'
               },{
                  xtype: 'datefield',
                  fieldLabel: 'Date picker'
               },{
                  xtype: 'button',
                  text: 'Button'
               },{
                  xtype: 'fieldcontainer',
                  fieldLabel: 'Radio field',
                  defaultType: 'radiofield',
                  defaults: {
                     flex: 1
                  },
                  layout: 'hbox',
                  items: [{
                     boxLabel: 'A',
                     inputValue: 'a',
                     id: 'radio1'
                  },{
                     boxLabel: 'B',
                     inputValue: 'b',
                     id: 'radio2'
                  },{
                     boxLabel: 'C',
                     inputValue: 'c',
                     id: 'radio3'
                  }]
               },{
                  xtype: 'fieldcontainer',
                  fieldLabel: 'Check Box Field',
                  defaultType: 'checkboxfield',
                  
                  items: [{
                     boxLabel: 'HTML',
                     inputValue: 'html',
                     id: 'checkbox1'
                  },{
                     boxLabel: 'CSS',
                     inputValue: 'css',
                     checked: true,
                     id: 'checkbox2'
                  },{
                     boxLabel: 'JavaScript',
                     inputValue: 'js',
                     id: 'checkbox3'
                  }]
               },{
                  xtype: 'hiddenfield',
                  name: 'hidden field ',
                  value: 'value from hidden field'
               },{
                  xtype: 'numberfield',
                  anchor: '100%',
                  fieldLabel: 'Numeric Field',
                  maxValue: 99,
                  minValue: 0
               },{
                  xtype: 'spinnerfield',
                  fieldLabel: 'Spinner Field',
                  step: 6,
                  
                  // override onSpinUp (using step isn't necessary)
                  onSpinUp: function() {
                     var me = this;
                     
                     if (!me.readOnly) {
                        var val = me.step;    // set the default value to the step value
                        if(me.getValue() !== '') {
                           val = parseInt(me.getValue().slice(0, -5));   // gets rid of " Pack"
                        }                          
                        me.setValue((val + me.step) + ' Pack');
                     }
                  },
                  // override onSpinDown
                  onSpinDown: function() {
                     var me = this;
                     if (!me.readOnly) {
                        if(me.getValue() !== '') {
                           val = parseInt(me.getValue().slice(0, -5));   // gets rid of " Pack"
                        }            
                        me.setValue((val - me.step) + ' Pack');
                     }
                  }
               },{
                  xtype: 'timefield',
                  fieldLabel: 'Time field',
                  minValue: '6:00 AM',
                  maxValue: '8:00 PM',
                  increment: 30,
                  anchor: '100%'
               },{
                  xtype: 'combobox',
                  fieldLabel: 'Combo Box',
                  store: Ext.create('Ext.data.Store', {
                     fields: ['abbr', 'name'],
                     data: [{
                        'abbr': 'HTML',
                        'name': 'HTML'
                     },{
                        'abbr': 'CSS',
                        'name': 'CSS'
                     },{
                        'abbr': 'JS',
                        'name': 'JavaScript'
                     }]
                  }),
                  valueField: 'abbr',
                  displayField: 'name'
               },{
                  xtype: 'filefield',
                  fieldLabel: 'File field',
                  labelWidth: 50,
                  msgTarget: 'side',
                  allowBlank: false,
                  anchor: '100%',
                  buttonText: 'Select File...'
               }]
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "formId"></div>
   </body>
</html>

The above program will produce the following result −