Sample Form Application Using Sencha Touch 2

Before reading this article please read the following articles.

  1. Introduction to Sencha Touch 2
  2. Hello World App using Sencha Touch 2
Other articles in this series.
  1. Sample form application using Sencha Touch 2
  2. Dealing with containers in Sencha Touch 2
  3. Working with DataBound Controls
  4. Introduction to MVC in Sencha Touch 2
Introduction

In last article we have developed a sample "Hello World Application". In this article we will develop a sample form. From this sample form application you will get a clear understanding of controls provided by Sencha Touch 2, how to use those controls and so on. So let's start with the basic controls provided by Sencha Touch 2.

As we know, to get input from users we need some TextBoxes, DropDowns, CheckBox, RadioButtons, Sliders, Toggle Buttons and so on. We will see all those basic controls here in this article. In future articles we will go through some container controls, databound controls, toolbars and so on.

Here we will start first from how to create a control. As in the previous article we have seen the "Ext.create" statement we will make this much easier now by replacing "Ext.create" with simple "xtype". First we will create our sample form and then we will go through the properties, events, methods.

Step 1:
Create a simple application as we created in the previous article. Add a reference to the Sencha library and css file. This time you need to replace only the css file with "sencha-touch.css" present in the downloaded SDK in the first article.

Step 2: Replace the code in app.js file with the following code:
  1. Ext.application({  
  2.     // requires download the required files i.e. dynamic loading  
  3.     requires: ['Ext.form.*','Ext.field.*','Ext.Button','Ext.Toolbar'],  
  4.     launch: function () {//Entry point  
  5.         var formPanel = Ext.create("Ext.form.Panel", {  
  6.             id: 'basicform', height: '100%', width: '100%',  
  7.             items: [{//items of formpanel  
  8.                 xtype: 'fieldset', title: 'Personal Info', id: 'personalinfo',  
  9.                 instructions: 'Please enter the information above.',  
  10.                 items: [{//items of fieldset  
  11.                     xtype: 'textfield',  
  12.                     name: 'Name',  
  13.                     label: 'UserName',  
  14.                     id: 'name'//required to get value  
  15.                     listeners: {  
  16.                         keyup: function (field, e, eOpts) {//event  
  17.                             alert('Key Up');  
  18.                         }  
  19.                     }  
  20.                 },{  
  21.                     xtype: 'passwordfield',  
  22.                     name: 'password',  
  23.                     label: 'Password',  
  24.                     id: 'password'  
  25.                 },{  
  26.                     xtype: 'textfield',  
  27.                     name: 'disabled',  
  28.                     label: 'Disabled',  
  29.                     disabled: true,  
  30.                     id: 'disabled'  
  31.                 },{  
  32.                     xtype: 'emailfield',  
  33.                     name: 'email',  
  34.                     label: 'Email',  
  35.                     placeHolder: 'krishna@gmail.com',  
  36.                     id: 'email'  
  37.                 },{  
  38.                     xtype: 'urlfield',  
  39.                     name: 'url',  
  40.                     label: 'Url',  
  41.                     placeHolder: 'http://krishnasaralanet.wordpress.com',  
  42.                     id: 'url'  
  43.                 },{  
  44.                     xtype: 'checkboxfield',  
  45.                     name: 'Check',  
  46.                     label: 'Check Me',  
  47.                     value: true,  
  48.                     id: 'check'  
  49.                 },{  
  50.                     xtype: 'spinnerfield',  
  51.                     name: 'spinner',  
  52.                     label: 'Spinner',  
  53.                     id: 'spinner'  
  54.                 },{  
  55.                     xtype: 'selectfield'//dropdown  
  56.                     name: 'Select',  
  57.                     label: 'Select One:',  
  58.                     valueField: 'value',  
  59.                     displayField: 'title',  
  60.                     id: 'select',  
  61.                     store: {//data bound control needs to pass store object  
  62.                         data: [{ value: '1', title: 'Master' },{ value: '2', title: 'Student' },{ value: '3', title: 'Instructor' },{ value: '4', title: 'Assistant' }]  
  63.                     }  
  64.                 },{  
  65.                     xtype: 'datepickerfield'//datepicker  
  66.                     name: 'date',  
  67.                     label: 'Start Date',  
  68.                     id: 'date',  
  69.                     value: new Date(),  
  70.                     picker: {  
  71.                         yearFrom: 1980  
  72.                     }  
  73.                 },{  
  74.                     xtype: 'textareafield'//area textbox  
  75.                     name: 'Desc',  
  76.                     id: 'desc',  
  77.                     label: 'Description',  
  78.                     maxRows: 10  
  79.                 },{  
  80.                     xtype: 'sliderfield',  
  81.                     name: 'height',  
  82.                     label: 'Height',  
  83.                     id: 'height'  
  84.                 },{  
  85.                     xtype: 'togglefield',  
  86.                     name: 'enable',  
  87.                     label: 'Security Mode',  
  88.                     id: 'toggle'  
  89.                 },{  
  90.                     xtype: 'radiofield',  
  91.                     name: 'team'//provide same name if you need group of radiobuttons  
  92.                     label: 'Red Team',  
  93.                     value: 'redteam'  
  94.                 },{  
  95.                     xtype: 'radiofield',  
  96.                     name: 'team'//provide same name if you need group of radiobuttons  
  97.                     label: 'Blue Team',  
  98.                     value: 'blueteam'  
  99.                 }]  
  100.             },{  
  101.                 xtype: 'toolbar',  
  102.                 docked: 'bottom'//also available left,right,top  
  103.                 items: [{//items on toolbar  
  104.                     xtype: 'button', id: 'done', text: 'Save', align: 'left', ui: 'confirm',  
  105.                     handler: function () {  
  106.                         //this is traditional way to get controls and their values when we will see MVC with sencha we will make this lot easier  
  107.                         //instead of writting independent controls will fetch directly bunch of records  
  108.                         var record = {//create array  
  109.                             name: Ext.getCmp('name').getValue(), //use Ext.getCmp('ControlId') to get Control instance  
  110.                             password: Ext.getCmp('password').getValue(),  
  111.                             email: Ext.getCmp('email').getValue(),  
  112.                             url: Ext.getCmp('url').getValue(),  
  113.                             spinner: Ext.getCmp('spinner').getValue(),  
  114.                             select: Ext.getCmp('select').getValue(),  
  115.                             date: Ext.getCmp('date').getValue(),  
  116.                             desc: Ext.getCmp('desc').getValue(),  
  117.                             height: Ext.getCmp('height').getValue(),  
  118.                             toggle: Ext.getCmp('toggle').getValue()  
  119.                         }  
  120.                         Ext.Viewport.setMasked({//disabling ui  
  121.                             xtype: 'loadmask',  
  122.                             message: 'Saving...'  
  123.                         });  
  124.                         alert('Record Saved'); //perform ajax call to save record  
  125.                         Ext.Viewport.setMasked(false); //after the process enabling UI  
  126.                     }  
  127.                 },{  
  128.                     xtype: 'button', id: 'cancel', text: 'Cancel', align: 'right', ui: 'decline',  
  129.                     handler: function () {  
  130.                         alert('Cancel');  
  131.                     }  
  132.                 }]  
  133.             }]  
  134.         });  
  135.         Ext.Viewport.add(formPanel);  
  136.     }  
  137. }); 

In code snippet above, as usual we have started our application using "Ext.application". You can see below that we have added a new attribute, "requires", which is used to specify the required Sencha classes to be downloaded. Here if this statement is omitted then it will still work because we have already downloaded all the Sencha classes when we added the reference to the Sencha library. Creating an application using the Sencha library is not the way but for demo purposes we are doing this. Next in future articles we will see the senchaSDKTool to generate, build and pack our application in case we need this required attribute.

Next we have created our required entry point, in other words the "launch" function. In the launch function we have create a formpanel "Ext.create("Ext.form.Panel")" by extending the "Ext.form.Panel" class. For the formpanel we have attributes like id, height, width and items. In the items attribute we have created two main controls using "xtype", in other words fieldset and toolbar. Now here to create a fieldset we need not to write a statement like "Ext.create("Ext.form.Fieldset")". We simply omitted "Ext.create" using  xtype. Here xtype is the tagprefix now onwords whenever you are creating a control simply use xtype. Next you will see we have added some items in fieldset as well. Fieldset is one of the container controls that includes child controls in it like TextBoxes, DorpDowns, email boxes, URL boxes and so on. In the following we will see the common controls and their config options, methods, and events.

  1. TextBox:  
  2.    xtype: 'textfield',  
  3.    name: 'Name',  
  4.    label: 'UserName',  
  5.    id: 'name',  
  6. listeners: {  
  7.   keyup: function (field, e, eOpts) {//event  
  8.   alert('Key Up');  
  9.   }  
  10. } 

In the above snippet you can see we have created a TextBox using xtype as a textfield. Textfield has config options like name, id, label, height, width and so on. The same TextBox has common methods like setValue(), getValue() and so on as well has common events like focus(), keyup() and so on.

All the remaining controls like EmialField, UrlField has the same syntax except DropDown. We will see the DropDown below.
 
DropDown
 
As we already know dropdown is a databound control so here are some differences between normal TextBox creation and DropDown creation. To create a dropdown we can use the following code.

  1. xtype: 'selectfield'//dropdown  
  2. name: 'Select',  
  3. label: 'Select One:',  
  4. valueField: 'value',  
  5. displayField: 'title',  
  6. id: 'select',  
  7. store: {//data bound control needs to pass store object  
  8.  data: [  
  9. { value: '1', title: 'Master' },  
  10. { value: '2', title: 'Student' },  
  11. { value: '3', title: 'Instructor' },  
  12. { value: '4', title: 'Assistant' }  
  13. ]} 

In the above snippet we have created a simple dropdown control using xtype as "selectfield". Here are some differences between normal Textfields and DropDowns. We have added three new attributes to selectfield, in other words valueField, displayField and store. As an ASP.Net developer we all are binding some datasource to our DropDown. Here store is nothing but the datasource for selectfield and as usual valueField and displayField are as in ASP.Net DropDown.
 
I hope you are clear about the controls used to create a basic form. Now we will look to the toolbar control that is the second item for "Ext.form.Panel" after "fieldset".
 
Toolbar
 
As a Windows application developer we all know about toolbars. Generally we use toolbars for common button menus and so on. Here is the same use of a toolbar for buttons.

  1. xtype: 'toolbar',  
  2.     docked: 'bottom'//also available left,right,top                           
  3.     items: [{//items on toolbar  
  4.  }] 

You can create a toolbar by using xtype as a "toolbar" toolbar with common config options like id, name, docked, items and so on. You can override the default toolbar color blue as you require by providing cls config that is nothing but the css class name. Here we have created a toolbar with two buttons, one for saving records and the second for canceling the operation.

  1. items: [{  
  2.     xtype: 'button', id: 'done', text: 'Save', ui: 'confirm',  
  3.     handler: function () {  
  4.         var record = {  
  5.               name: Ext.getCmp('name').getValue(),  
  6.               password: Ext.getCmp('password').getValue(),  
  7.               email: Ext.getCmp('email').getValue(),  
  8.               url: Ext.getCmp('url').getValue(),  
  9.               spinner: Ext.getCmp('spinner').getValue(),  
  10.               select: Ext.getCmp('select').getValue(),  
  11.               date: Ext.getCmp('date').getValue(),  
  12.               desc: Ext.getCmp('desc').getValue(),  
  13.               height: Ext.getCmp('height').getValue(),  
  14.               toggle: Ext.getCmp('toggle').getValue()  
  15.           }  
  16.           Ext.Viewport.setMasked({  
  17.           xtype: 'loadmask',  
  18.           message: 'Saving...'  
  19.          });  
  20.               alert('Record Saved');  
  21.               Ext.Viewport.setMasked(false);  
  22.         }  
  23.     },  
  24.      {  
  25.      xtype: 'button', id: 'cancel', text: 'Cancel', ui: 'decline',  
  26.      handler: function () {  
  27.      alert('Cancel');  
  28.      }  
  29.    }  
  30. ]   
In above snippet you can see we have simply added two buttons, in other words save and cancel. The buttons have a common config options like id, text, cls and so on. For the buttons here we have created handler functions that will be called when the button is clicked. In this handler function we are writing code to get the values for the above TextBoxes, DropDown, emailfields and so on.

To get a control instance Sencha Touch provides the "Ext.getCmp('ControlId')" function. Once you have the control instance you call the methods of a specific control, like for TextBoxes we call getValue() to get the value from the TextBox.
 
Conclusion
 
Here I'm ending this explanation. For more about controls and their config options see docs.sencha.com. In the next article we will see about container controls.