Home » Sencha Touch » Sencha touch Form

Sencha touch Form

Welcome to the fifth module of this series. In this module we will learn about Sencha touch form, we will learn about different form elements provided by sencha touch, how to add these elements and at last we will learn about applying validation of form values before saving them.

Sencha touch provides rich set of fields which can be used in forms, sencha Touch form can be used to take feedback, for login info, for contacting any person and so on.

Form panel is basically a panel with additional features. Form panel can be created by using Ext.Form.Panel.

Below is the example of form panel. This panel will explain:

  • almost all the fields that can be added in form and explain other aspects also.
  • how we can get the value of all the fields added in form.
  • how fields can be divided in groups by using fieldset.
  • how can we enable and disable fields with toggle button
var formPanel = Ext.create('Ext.form.Panel',{  // creating form panel
  fullscreen: true, // this form will occupy whole screen area
  id:'id_formPanel', // id of this panel
  items:[{
   xtype:'fieldset',
   title:'Personal Information', // title of the fieldset that will be displayed at top of fieldset
   instructions:'Provide your personal information', // instruction of the fieldset that will be displayed at bottom of fieldset
   items:[{
      xtype: 'textfield', // textfield is the simplest widget which is used to enter one line text.
      label:'FirstName',  // label of this field that will be displayed
      name:'firstname',  // name attribute that will be used while submitting form
      maxLength:10, // max number of characters allowed for this field, user will not be able to enter any character after this limit.
      placeHolder:'First Name', // placeHolder for this field.
      required:true // boolean value which tell whether this field is required or not
   },{
      xtype: 'textfield',
      label:'LastName',
      name:'lastname',
      maxLength:10,
      placeHolder:'Last Name'
   },{
      xtype: 'emailfield', // email field is a type of textfield, the only difference is, specialized email keyboard will be opened to enter value.
      label:'Email',
      name:'email',
      placeHolder:'abc@xyz.com',
      required:true
   },{
      xtype: 'passwordfield', // same as textfield, entered text will be displayed as stars
      label:'Password',
      name:'password',
      placeHolder:'Enter Password',
      required:true
   },{
      xtype:'textfield',
      label: 'Phone Number',
      name: 'phonenumber',
      component: {
        xtype: 'input',
        type: 'tel' // adding this config under component will open number keyboard instead of normal keyboard on devices
      },
   },{
      xtype:'radiofield', // create radio field
      name:'gender', // radio field with same name value will be considered under same group
      value:'male',
      label:'Male',
      checked:true
   },{
      xtype:'radiofield',
      name:'gender', // same as above radio field, so only one option can be selected at a time by user because both the radio fields are under same group
      value:'female',
      label:'Female',
   },{
      xtype: 'datepickerfield', // specialized field to display Ext.picker.Date to show data picker.
      destroyPickerOnHide:true, // making this true will destroy date picker on hide, this will save memory but will take time when datepicker will be opened next time (because it has been destroyed on each hide)
      label:'DOB',
      name:'dob',
      value: new Date(), // default value the will be displayed on initialization
      picker:{
        yearFrom:1980, // start year
        yearTo:2000       // end year
      }
   },{
      xtype: 'selectfield', // select field will display dropdown, we can load the selectfield data from store also.
      label:'Country',
      name:'country',
      options:[{ // options config take array of values we want to display in drop down.
         text:"Berlin",
         value:'BER'
      },{
         text:'India',
         value:'IN'
      },{
         text:'Sydney',
         value:'SYN'
      },{
         text:'United States',
         value:'US'
      }]
    }]
   },{
   xtype:'fieldset',  // second fieldset to display professional information
   title:'Professional Information',
   instructions:'Provide your professional information',
   items:[{
     xtype: 'checkboxfield', // checkboxfield is same as radio field, the only difference is multiple options can be selected. Items with same name will be in a same group.
     name : 'subject',
     label: 'Computer',
     value: 'computer',
     checked: true // this option would be selected by default
   },{
     xtype: 'checkboxfield',
     name : 'subject',
     label: 'Physics',
     value: 'physics',
  },{
     xtype: 'checkboxfield',
     name : 'subject',
     label: 'Chemistry',
     value: 'chemistry',
  },{
     xtype: 'checkboxfield',
     name : 'subject',
     label: 'Mathematics',
     value: 'mathematics',
 },{
     xtype: 'checkboxfield',
     name : 'subject',
     label: 'Biology',
     value: 'biology',
},{
    xtype:'togglefield', // display toggle button which can have only two values either true or false
    label: 'Add Percentage?',
    value: false,
    listeners: { // adding listener which will be called if any event occurs
        change: function(field, newValue, oldValue) { // change function will be called whenever the toggle value changes
        var percentageComponent = Ext.ComponentQuery.query('#id_percentageSlider')[0]; // here we are using ComponentQuery to get the slider component
        if(newValue== true){ // if toggle is true then enable the slider
           percentageComponent.enable();
        }else{ // else make it false
           percentageComponent.disable();
        }
      }
    }
 },{
    layout: 'vbox', // here we are creating vbox which will have two items, one is slider and other is numberfield to display slider value.
    items: [{
     xtype: 'sliderfield', // sliderfield display HTML5 slider and allows user to set the value by sliding the "thumb".
     id:'id_percentageSlider',
     label:'Last year Percentage',
     name:'percentage',
     increment:.10, // value will be incremented by .10 whenever the slider is moved.
     value:30, // initial value
     minValue: 30, // start value of slider
     maxValue: 100, // end value of slider
     disabled:true, // boolean value to enable and disable the field, by default its false
     listeners:{ // we are adding this listener so that we can display the slider value in numberfield whenever the slider value changes
        drag:function( value, sl, thumb, e, eOpts ){ // this method will be called whenever the slider is dragged.
            Ext.ComponentQuery.query('#id_displayPercentage')[0].setValue(e); // getting numberfield component
         }
      }
    },{
       xtype: 'numberfield', // number field is a specialized type of textfield used to display number. In our example this field will be used to display the slider value.
      id:'id_displayPercentage',
      value: 30,
      disabled:true
      }
    ]
  },{
     xtype: 'spinnerfield', // spinnerfield is same as numberfield, it has "+" and "-" button to increment and decrement the numberfield value.
     label:'Grade',
     name:'grade',
     minValue: 8, // min value allowed
     maxValue: 10, // max value allowed
     stepValue:1, // Value that will be added or subtracted from current value when a spinner is used.
     cycle:true // cycle config loop the values if set to true. That means value will be cycled between maxValue and minValue only.
   }]
  },{
     xtype:'titlebar', // now at last we have created title bar to display save button
     docked:'top', // we have docked titlebar to top
     title:'Student Information form',
     items:[{
       xtype:'button',
       text:'save',
       listeners:{
          tap:function( value, e, eOpts){
            var formPanel = Ext.ComponentQuery.query('#id_formPanel')[0]; // getting form component
            var formData = formPanel.getValues(); // getValues() method will return all the formfield values
            console.log(formData);
          }
        }
     }]
   }]
});

Ext.Viewport.add(formPanel); //finally we are adding our panel to viewport.

In above example we have created a form which will take student inputs.

“Save” button will get the value of all the fields by using getValues() method. We can pass two optional params also to getValuse() method, getValues([enabled],[all]): setting “enabled” to true will get the value of enabled fields only and setting  “all” to true will get value of all the fields even if name field is missing.

Clicking on save button will return the object of all the values, below is the result

Object {firstname: “Himanshu”, lastname: “Chahar”, email: “himanshuchahar@gmail.com”, password: “testingpassword”, phonenumber: “9000000068″…}

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>