Navigation View in Sencha Touch 2 Explained - Part2

If you are new to this Post Series and haven't read Part 1 of this Post. Please read first and proceed with part2. Today, we are going to see how we can apply swipe event to the container view component by using listeners config

Attach Swipe Event Handler to Home Page Container

Using listeners configuration, we are attaching swipe event to the homepage container and also attaching handler function onHomepagecontainerSwipe() that needs to be called when swipe event occurs.

Inside the Handler function, when swipe direction is left, we are firing a custom event 'swipeNextPage' using fireEvent() with parameters. This parameter contains the next view that needs to be pushed in to the Navigation View.

Ext.define('MyApp.view.HomePageContainer', {
    extend: 'Ext.Container',
    alias: 'widget.homepagecontainer',

    config: {
        html: 'This is Home Page',
        itemId: 'homepagecontainer',
        style: 'font-size:22px;font-weight:bold;',
        styleHtmlContent: true,

        listeners: [
            {
                fn: 'onHomepagecontainerSwipe',
                element: 'element',
                event: 'swipe'
            }
        ]
    },

    onHomepagecontainerSwipe: function(event) {
        var me = this;

        if(event.direction == "left"){
            me.fireEvent('swipeNextPage',me,{xtype:'aboutuscontainer'});
        }
    }
});

Attach Swipe Event Handler to About Us Container

Using listeners configuration, we are attaching swipe event to the Aboutus container and also attaching handler function onAboutuscontainerSwipe() that needs to be called when swipe event occurs.

Inside the Handler function, when swipe direction is left/right, we are firing a custom event 'swipeNextPage' using fireEvent() with parameters.This parameter contains the next view that needs to be pushed in to the Navigation View.

Ext.define('MyApp.view.AboutUsContainer', {
    extend: 'Ext.Container',
    alias: 'widget.aboutuscontainer',

    config: {
        html: 'This is About Us Page',
        itemId: 'aboutuscontainer',
        style: 'font-size:22px;font-weight:bold;',
        styleHtmlContent: true,

        listeners: [
            {
                fn: 'onAboutuscontainerSwipe',
                element: 'element',
                event: 'swipe'
            }
        ]
    },

    onAboutuscontainerSwipe: function(event) {
        var me = this;

        if(event.direction == "left"){
            me.fireEvent('swipeNextPage',me,{xtype:'contactuscontainer'});
        }else if (event.direction == "right"){
            me.fireEvent('swipeNextPage',me,{xtype:'homepagecontainer'});  
        }
    }
});

Attach Swipe Event Handler to Contact Us Container

Using listeners configuration, we are attaching swipe event to the Contactus container and also attaching handler function onContactuscontainerSwipe() that needs to be called when swipe event occurs.

Inside the Handler function, when swipe direction is left/right, we are firing a custom event name 'swipeNextPage' using fireEvent() with parameters.This parameter contains the next view that needs to be pushed in to the Navigation View.

Ext.define('MyApp.view.ContactUsContainer', {
    extend: 'Ext.Container',
    alias: 'widget.contactuscontainer',
    config: {
        html: 'This is Contact Us Page',
        itemId: 'contactuscontainer',
        style: 'font-size:22px;font-weight:bold;',
        styleHtmlContent: true,
        listeners: [
            {
                fn: 'onContactuscontainerSwipe',
                element: 'element',
                event: 'swipe'
            }
        ]
    },
    onContactuscontainerSwipe: function(event) {
        var me = this;
        if(event.direction == "left"){
            me.fireEvent('swipeNextPage',me,{xtype:'homepagecontainer'});
        }else if (event.direction == "right"){
            me.fireEvent('swipeNextPage',me,{xtype:'aboutuscontainer'});   
        }
    }

Custom Event Implementation in Controllers

We are firing custom event with name 'swipeNextPage', when swipe event occurs inside the view component. This custom event 'swipeNextPage' is mapped to the handler function onContainerSwipeNextPage() that will be called when the fired custom event is caught in the controller.  Now we are going to replace the current active view with the new view using the Navigation View animateActiveItem() method.

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

    config: {
        refs: {
            navView: '#mynavigationview'
        },

        control: {
            "container": {
                swipeNextPage: 'onContainerSwipeNextPage'
            }
        }
    },

    onContainerSwipeNextPage: function(container, pageName) {
        var nav = this.getNavView();
        nav.animateActiveItem(pageName,{type: 'slide', direction: 'left'});
    }
});

When i run this Code in Google Chrome, Following are the outputs.

Hope, you enjoyed this Post.

Download the Source Code