How to fire Custom Events with Parameters in Sencha Touch 2

In Sencha Touch 2, Every view components supports the various list of events like initialize,activiate, painted,  tap, show, hide and so on. In  addition to that, Sencha Touch also supports for adding custom events by using fireEvent() function. This function accepts the following parameters

• event Name: The name of the event to fire
• args: variable number of parameters are paased to the event handler

This function will returns boolean (true/false).

Let me demonstrate this feature with example, which display the Toolbar with login button. By clicking on the login button, we will fire the custom event for the toolbar view component . We are also going to see, how the fired custom event will be mapped with the handler function in the controller.

Create a Toolbar with Button

First, we will create a toolbar with login button. Using listeners configuration, we are attaching the tap event to the function onLoginButtonTap() that needs to be called when the tap event fires. Inside the function, we will fire the custom event for the toolbar view component with event name as  'loginButtonTap' and passing parameters to the handler function.

Ext.define('MyApp.view.MyToolbar', {
    extend: 'Ext.Toolbar',
    alias: 'widget.mytoolbar',

    config: {

        id: 'mytoolbar',
        itemId: 'mytoolbar',
        docked: 'top',
        itemId: 'toolbarSetting',
        items: [
            {
                xtype: 'button',
                itemId: 'loginButton',
                id: 'loginButton',
                text: 'Login'
            }
        ],
        listeners: [
            {
                fn: 'onLoginButtonTap',
                event: 'tap',
                delegate: '#loginButton'
            }
        ]
    },
    onLoginButtonTap: function(button, e, options) {
        var me = this;
        var toolbar = this.up('#mytoolbar');
        me.fireEvent('customtoolbarevent',toolbar,true,{name:'demo'});
    }
});

Add the Custom Event in Controller

Sencha Touch controllers, provides control configuration which is used to map a Controller functions that should be called whenever certain view Component events are fired. This view Component must be specified using ComponentQuery Selectors. If you want to know the various ways for attaching event handler, Please read this Post.

As you may notice below, the fired custom event name 'loginButtonTap' is mapped to the onButtonLoginButtonTap() function for the toolbar component using componentQuery (#mytoolbar). The onButtonLoginButtonTap() function accepts the three parameters  button, isCustom, args which are passed from the fireEvent().

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            "#mytoolbar": {
                customtoolbarevent: 'onButtonLoginButtonTap'
            }
        }
    },

    onButtonLoginButtonTap: function(toolbar, isCustom, args) {
        Ext.Msg.alert("Fired Custom Event mapped with parameters");
    }
});

Output:

Hope, you enjoyed this Post.