Wednesday 3 April 2013

Pass data from view to controller using fireEvent in Sencha Touch 2

This Post is the continuation of Create a Basic Form Post. If you haven't read it, please read first. Today, We are going to see how to pass form data from view to controller using fireEvent().

 Sencha Touch 2 application follows MVC architecture, so application logic needs to be added inside controller and only display logic and event attachment needs to be added inside views.

 First, let's add an Event listener to the 'Save' button using listeners property.

listeners: [
    {       fn: 'onSaveTap',       event: 'tap',       delegate: '#save'     } ]
 When 'Save' button is clicked, onSaveTap() function will be called with parameters - button Object, event Objects and options.

 onSaveTap:function(button,e,options){
    var me = this;
    var formObj = Ext.ComponentQuery.query('formpanel')[0];

    var formValues = formObj.getValues();
    this.fireEvent('fireFormEvent',me,formValues);
 }

Ext.ComponentQuery.query() is used to filter returned components using CSS based Selector. It returns an array of matched Components. Here, we have used xtype 'FormPanel' as the selector. So formObj will contain a reference of FormPanel Component. getValues() will returns an object containing the value of each field in the form, keyed to the field's name.

Now,  fireEvent() is used to fire Custom Event 'fireFormEvent' with parameters to the controller. We need to catch the fired Custom event 'fireFormEvent' in the controller using the below code

Defining the Controller Class

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    config: {
     control: {
            "FormPanel#registrationform": {
                fireFormEvent: 'onFormPanelFireEvent'
            }
        }
    },
    onFormPanelFireEvent: function(formpanel, formValues) {
        console.log(formValues);
    }
});

Using control config property, we can attach events to the controller and associate that events to the FormPanel view component using itemId. Now, onFormPanelFireEvent() function will be invoked when controller catches the fired event 'fireFormEvent'. formValues parameter  will have the form  values.

Combining 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'
            }
        ],
        listeners: [{
                fn: 'onSaveTap',
                event: 'tap',
                delegate: '#save'
               }
       ]
    },
    onSaveTap:function(button,e,options){
       var me = this;
       var formObj = Ext.ComponentQuery.query('formpanel')[0];
       var formValues = formObj.getValues();
       this.fireEvent('fireFormEvent',me,formValues);
    }
});

When i run the above code in Google Chrome, Below is the console log output


Hope, you enjoyed this Post.

5 comments:

  1. Thanks for your article. This is very useful for me.

    ReplyDelete
  2. I've a question for you. Basically I've a panel called DummyPanel, Now on dummypanel initialize event I've called a controller function like as follows:

    var me = component;
    var fieldCollection =
    {
    "Order" : 'ordNumber',
    "Ref": 'refNumber'
    };

    me.fireEvent('myControllerFunction','Param1', fieldCollection, 'Param3');
    Now I want to get fieldCollection JSON object value within function myControllerFunction, to get value from fieldCollection I'm using following code:

    myControllerFunction(param1, collection, param3)
    {
    Ext.Msg.alert(collection.Order);
    }
    But it does not return anything. So please let me know how to resolve this problem!!

    ReplyDelete
    Replies
    1. Hi Arun Singh,

      Did you add 'control' configuration settings in the controller, which will map the event name to method name.

      Thanks
      Suresh A

      Delete
  3. How can we trigger Enter Key and Backspace Key to fire a particular event..Since I have a formpanel which contain image on the left and the corresponding field on the right. When we enter data into that form and then press Enter key I need to fire an event for saving the data. Also When I hit Backspace an event fire for undo that panel. How can we do this in sencha touch. I hope you can help me. Thanks in adv.

    Anu.

    ReplyDelete
  4. Do you know how to use delegate property with plugins ? For example I have a PullRefresh on a List and I want to fire a custom event on event "updatedata" of PullRefrash plugin ? Thanks in advance !

    ReplyDelete