Ext.js Form

Ext.js Form

<!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>