Add Event Listeners to View Component in controllers on Sencha Touch 2

In Sencha Touch 2, adding any event listeners to View Component is easy. 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.

We are going to create a ToolBar component which contains a login button. Using ComponentQuery Selectors, we are going to see the various ways that sencha touch allows to attach 'tap' event to login button.

Creating a Toolbar

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

    config: {
        docked: 'top',
        items: [
            {
                xtype: 'button',
                id: 'loginIdButton',
                itemId: 'loginItemButton',
                text: 'Login'
            }
        ]
    }
});

Using Id Config to attach Event

Each Components in sencha touch allows to assign unique id  using id configuration.  Components created with an id may be accessed globally using Ext.getCmp(). This id will also be used as the element id for the containing HTML element that is rendered to the page for this component.

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

    config: {
        control: {
            "#loginIdButton": {
                tap: 'onButtonTap'
            }
        }
    },
    onButtonTap: function(button, e, eOpts) {
        Ext.Msg.alert('Button Tapped');
    }
});

Note: Please make sure, the component id needs to be unique across your application.

Using itemId Config to attach Event

An itemId can be used as an alternative way to get a reference to a component. Components created with an itemId may be accessed locally to the container using Ext.Container.getComponent().

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

    config: {
        control: {
            "mytoolbar#loginItemButton": {
                tap: 'onButtonTap'
            }
        }
    },
    onButtonTap: function(button, e, eOpts) {
        Ext.Msg.alert('Button Tapped');
    }
});

Using xtype Config to attach Event

The xtype configuration option can be used as a shortcut to the full component name. For example, the component Ext.button.Button has an xtype of button.You can also attach dot in front of xtype name, while you are accessing the component.

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

    config: {
        control: {
            "button": {
                tap: 'onButtonTap'
            }
        }
    },
    onButtonTap: function(button, e, eOpts) {
        Ext.Msg.alert('Button Tapped');
    }
});

For Demonstration Purpose, I only explained attaching 'tap' events to View Components. You can also try experimenting with other Events Listeners like initialize, painted, resize, show, hide etc.

Output:
Alert Message Box with message "Button Tapped" will be shown, when you tap on login button present in the ToolBar.

Hope, you enjoyed this Post.