Tuesday 2 April 2013

How to create a basic form using Sencha Touch 2 - Part1

HTML Forms plays an important role in Web application. It adds user interactivity to the application and allows to collect user information. Data Flow between client browser and the server is done using HTML Forms.

Sencha Touch has a strong support for HTML Form and it provides various input fields like (Text, Email, Url and so on). Today, Let's see how to design a basic form using Sencha Touch 2

Ext.define('MyApp.view.FormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.FormPanel'

First, lets define a Form Panel  class with name 'FormPanel' which extends 'Ext.form.Panel' Class. So all the properties of Ext.form.Panel Class will be accessible inside FormPanel Class.

config: {
        itemId: 'registrationform',
        items: [
            {
                xtype: 'fieldset',
                title: 'Registration Form'

Let's configure FormPanel properties using config property and provide itemId as 'registrationform'. Add fieldset (Ext.form.Fieldsetas the item for FormPanel, which act as the container for the Form Fields and provide Title as 'Registration Form'.

 items: [
   {
    xtype: 'textfield',
    label: 'Username',
    labelWrap: true,
    name: 'username',
    placeHolder: 'Enter Username'
    },
    {
    xtype: 'textfield',
    label: 'Password',
    labelWrap: true,
    name: 'password',
    placeHolder: 'Enter Password'
    },
    {
    xtype: 'emailfield',
    label: 'Email',
    labelWrap: true,
    name: 'email',
    placeHolder: 'email@example.com'
    },
    {
    xtype: 'urlfield',
    label: 'Website',
    labelWrap: true,
    name: 'website',
    placeHolder: 'http://example.com'
    },
    {
    xtype: 'textareafield',
    label: 'About You',
    labelWrap: true,
    name: 'aboutyou',
    placeHolder: 'Tel me about yourself'
    }
]

Then, let's add the following form fields - textfield (Ext.field.Text), emailfield (Ext.field.Email), urlfield (Ext.field.Url), textareafield (Ext.field.Textarea) as the items for FieldSet and configure its Properties. Following are the some of Config Properties

disabled: Set to true to disable the field.
label: The text label to associate with the field.
labelAlign: The Position of the label. Options are left (default), right, top, bottom.
labelWidth: The width of the label.
name: The name of the input field.
placeHolder: The value to display in text fields when no value has been entered.
required: Set to true to indicate this is required field.
value: The default value for the field.

{
   xtype: 'button',
   itemId: 'save',
   width: '30%',
   text: 'Save'
}

Finally let's add a button (Ext.field.Button) and configure its properties. That's it, now we have designed a basic form using Sencha Touch.

Combine All Together:

Ext.define('MyApp.view.FormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.FormPanel',

    config: {
        itemId: 'registrationform',
        items: [
            {
                xtype: 'fieldset',
                title: 'Registration Form',
                items: [
                    {
                        xtype: 'textfield',
                        label: 'Username',
                        labelWrap: true,
                        name: 'username',
                        placeHolder: 'Enter Username'
                    },
                    {
                        xtype: 'textfield',
                        label: 'Password',
                        labelWrap: true,
                        name: 'password',
                        placeHolder: 'Enter Password'
                    },
                    {
                        xtype: 'emailfield',
                        label: 'Email',
                        labelWrap: true,
                        name: 'email',
                        placeHolder: 'email@example.com'
                    },
                    {
                        xtype: 'urlfield',
                        label: 'Website',
                        labelWrap: true,
                        name: 'website',
                        placeHolder: 'http://example.com'
                    },
                    {
                        xtype: 'textareafield',
                        label: 'About You',
                        labelWrap: true,
                        name: 'aboutyou',
                        placeHolder: 'Tel me about yourself'
                    }
                ]
            },
            {
                xtype: 'button',
                itemId: 'save',
                width: '30%',
                text: 'Save'
            }
        ]
    }
});
 When i run this code in Google Chrome, Below is the output.


Hope, you enjoyed this Post.

  • Part 2 - Apply Model Validation to the Form using Sencha Touch 2
  • Part3 - Save Form data locally using local storage in Sencha Touch 2

11 comments:

  1. how to trigger save action on enter key pressing in sencha touch ?

    ReplyDelete
  2. I am waiting for your valuable reply . Please help me.

    ReplyDelete
  3. If you need to submit form data by pressing 'Enter' key. Below FormPanel configuration will help you.

    submitOnAction: true

    Thanks and Regards,
    Suresh Ariya

    ReplyDelete
  4. I have an image panel with in that panel I have some text. I need to get label tagger. so I used to create a touch box functionalities. But now its seems only a single squares not expanding its edges. How can I resolve this issue.. Please help me. I am working on sencha touch 2.3.

    ReplyDelete
    Replies
    1. Hi Anu,
      i able to understand your issue. can you please paste the source code. that will be more helpful for me.

      Thanks
      Suresh Ariya

      Delete
    2. app->view->touchbox.js

      Ext.define('HSC.view.TouchBox', {
      extend: 'Ext.Container',
      alias: "widget.touchboxview",
      config: {
      cls: 'box',
      draggable: true,
      left: 0,
      top: 0,
      height: 100,
      width: 100,
      zIndex: 5000,
      style: 'border: 1px solid #000;\
      background:#FFB;\
      opacity: 0.5;\
      font-size: 10px;\
      padding: 5px;'
      },
      initialize: function() {
      this.callParent(arguments);
      this.topbarHeight = 50;
      this.positionConf = this.getInitialConfig('positionConf');

      console.log(this.positionConf);

      this.setLeft(this.positionConf.pageX);
      this.setTop(this.positionConf.pageY - this.topbarHeight);

      // add event listener
      this.on('dragend', this.onDragend, this);
      },
      /**
      * on double tap destroy the object
      *
      * @param {} event
      * @param {} html
      * @param {} obj
      */
      onDoubleTap: function(event, html, obj) {

      if (typeof this.draggable == 'object') {
      // remove draggablity
      this.draggable.purgeListeners();
      this.draggable.destroy();
      this.draggable = true;

      this.addTouchEvents();
      } else {
      this.removeTouchEvents();
      this.setDraggable(true);
      }
      this.updateInformations(event);
      },
      /**
      * on touch start
      *
      * @param {} event
      * @param {} html
      * @param {} obj
      */
      onTouchstart: function(event, html, obj) {
      this.updateInformations(event);
      },
      /**
      * on touch move
      *
      * @param {} event
      * @param {} html
      * @param {} obj
      */
      onTouchmove: function(event, html, obj) {
      this.setSize(event.deltaX, event.deltaY);
      this.updateInformations(event);
      },
      /**
      * on touchend
      *
      * @param {} event
      * @param {} html
      * @param {} obj
      */
      onTouchend: function(event, html, obj) {
      var size = this.getSize();
      // prevent to build min boxes while a single tap
      if (size.width < 20 && size.height < 20) {
      this.destroy();
      }
      },
      /**
      * On dragen update box informations
      * @param {} draggable
      * @param {} event
      */
      onDragend: function(draggable, event) {
      this.updateInformations(event);
      },
      /**
      * On pinch destroy the object
      *
      * @param {} e
      * @param {} el
      * @param {} obj
      */
      onPinch: function(e, el, obj) {
      this.removeTouchEvents();

      this.destroy();
      //el.style.webkitTransform = 'scale(' + e.scale + ')';

      /*
      this.setSize(
      this.getWidth() * (e.previousScale * e.scale),
      this.getHeight() * (e.previousScale * e.scale)

      );

      this.setHtml(
      'e.scale: ' + e.scale + '
      ' +
      'e.deltaScale: ' + e.deltaScale + '
      ' +
      'e.previousScale: ' + e.previousScale + '
      ' +
      'e.deltaScale: ' + e.deltaScale + '
      ' +
      'e.distance: ' + e.distance + '
      '
      );
      */

      },
      /**
      * Update Informations in container
      */
      updateInformations: function(event) {
      this.setHtml(
      String.format(
      'w: {0} h: {1}
      ' +
      'x: {2} y: {3}
      ' +
      'draggable: {4}',
      this.getWidth(),
      this.getHeight(),
      event.pageX,
      event.pageY,
      (typeof this.draggable == 'object' ? true : false)
      )
      );
      }
      });

      Delete
  5. when a box is tapped I need to change the css of yellow to a green or something to let them know it is selected in sencha touch 2.3

    ReplyDelete
    Replies
    1. Hi Anu, you need to use this code

      var element = Ext.ComponentQuery.query('box xtype/itemid')[0];
      element.addCls('css-classname');

      Hope, this solves your issues.

      Regarding image label tagger issue, i will update by tomorrow.

      Thanks
      Suresh Ariya

      Delete
    2. Thanks. When I create a box insise the image first time it shows correct width, height , x and y but when are dragging that boxes that relative postion is not changing. Please help me to resolve that issue.

      Delete
    3. Hi Anu, You need to create 'box' using 'Ext.Panel' Component (Floating). This component support 'draggable' configuration which will allow to drag the panel. You need to have something like this below code

      var floatingPanel = Ext.create('Ext.Panel', {
      height: 200,
      width: 200,
      draggable: true,
      floating: true,
      html: 'This is panel dragging demo.',
      left: 0,
      top: 0,
      modal: true,
      items: [{
      xtype: 'toolbar',
      docked: 'top',
      title: 'Drag me!'
      }]
      });

      Ext.Viewport.add(floatingPanel);

      Hope, this helps. thanks.

      Delete
    4. Sorry this is not what exactly I need. I think you don't understand my question. I will explain my question once more.. I have a panel that is used for loading an image. some labels also within that image. So I need to tag that label. So I used touchbox functionality to create and remove rectangle boxes. Now I face some issues.. when I create the first touch box, it comes in the correct palace where I touch. Next if I create another touch box, then it is showing in the exact place where I tapped. But if I just resize the browser (F12 or Fullscreen) it comes in the correct position. When I faced similar issues in ExtJs previous projects doLayout fixed the problem, but in SenchaTouch 2 doLayout is missing.Lets say we create multiple touchbox. The user is able to move the position of the first box he created by using click & drag. But drag move is not working for all other touchboxes we create. Please help me to resolve this issue.

      Delete

Related Posts Plugin for WordPress, Blogger...