Navigation View in Sencha Touch 2 Explained - Part1

In Sencha Touch 2, Navigation View allows you to Push and Pop views into the application. Its basically an  container with a card layout, so only one view can be visible at a time.

 In addition to that, it also allows applying animation when you are doing push from current active view to the new view, or the previous view by using pop.

 Let me demonstrate this by providing an example. We will be creating a Navigation View Component which contains Header Section, Body Section and Footer Section. We are going to see how we can push or pop views into body Section by swipe.

Create a Navigation View

 Let's create a Navigation View with Header Section, Middle Section (HomePage Content) and Footer Section.

Ext.define('MyApp.view.MyNavigationView', {

    extend: 'Ext.navigation.View',
    alias: 'widget.mynavigationview',

    requires: [
        'MyApp.view.HomePageContainer'
    ],

    config: {
        id: 'mynavigationview',
        navigationBar: {
            docked: 'top',
            hidden: true
        },
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Header'
            },
            {
                xtype: 'homepagecontainer'
            },
            {
                xtype: 'container',
                docked: 'bottom',
                height: 50,
                html: 'Footer',
                style: 'background-color:#1676b9;font-size:22px;color:#ffffff;text-align:center;'
            }
        ]
    }

});

Create a Home Page View:

  Let's create a HomePage Container with Static HTML Content

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
        }
});

Create About Us View:

 Let's create a About Us View Container with static HTML Content.
 

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
    }
});

Here is how the view will look like


Create Contact Us View:

 Let's create a Contact Us View Container with static HTML Content.

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
    }
 });

Here is how the view will look like


 In Part2 of this Post, We are going to see, how to apply swipe to the middle section container (HomePage, AboutUs and ContactUs)  and push as well as Pop View Component into the Navigation View by applying animation during Swipe event.

 Hope, you enjoyed this Post.