Add Event Listener to component in sencha touch 2

Adding Event Listener (swipe,tab etc) to component in sencha touch 2 can be done using  'on' Event (Alias  for addListener Event).

In order to demonstrate this, let's create a Panel and attach the 'swipe' Event at the time of panel is displayed on the screen i.e 'show' event.

Ext.define('CRN.view.TestPanel', {

    extend: 'Ext.Panel',

    alias: 'widget.TestPanel',

    config: {

        height: '80%',

        html: 'Swipe Here',

        styleHtmlContent: true,

        width: '80%',

        listeners: [

            {

                fn: 'onPanelShow',

                event: 'show'

            }

        ]},

        onPanelShow: function(component, options) {

          component.element.on('swipe',

          function(){Ext.Msg.alert('swipe called');},component);

    }

});

Output: Alert Message "swipe called" will be displayed when you swipe on the screen

Attach Multiple Event to the component

You can also attach multiple events to the component using on(). Let's modify the above onPanelShow function to attach 'tap' Event in addition to 'swipe' Event.

onPanelShow: function(component, options) {
    component.element.on({
      swipe:function(){Ext.Msg.alert('swipe called');},
      tap: function(){Ext.Msg.alert('tap called');},
      scope:component});
}

Output: Alert Message "swipe called" will be displayed when you swipe on the screen and Alert Message "tap called" will be displayed when you tap on the screen.

Hope, you enjoyed this Post.