Sencha Touch click event on slide nav item

Question

I have two questions here:

1. on click on list item in slide nav load a new page content
2. on click of home icon on bottom of screen, take the use back to main view

I have followed following code sample to get Facebook like menu

1. Steps: Described steps
2. Git Code: Repo URL
3. Demo site: Tutorial demo url

I am successful to get the sliding menu work as per the demo, but I am not able to set a click events for all items in menu and on home icon.

here is what I want to do. app/views/Navigation.js (as per the demo code structure)

Ext.define('SlideNav.view.Navigation', {
                extend: 'Ext.List',
                xtype: 'navigation',
                requires : ['Ext.data.Store'],
                config: {
                                cls : 'nav-list',
                                itemTpl : '{title}',
                                data : [{
                                                title : 'About'
                                },{
                                                title : 'Item 2'
                                },{
                                                title : 'Item 3'
                                }]
                },

 // This part is new
    listeners: {
            itemtap: function (list, index, item, record) {
                //Ext.Msg.alert('Selected Link', record.data.itemId);
                switch (record.data.itemId) {
                    default: {
                        this.onAboutButtonTap();
                        break;
                    }
                }
            }
        },
        onAboutButtonTap: function () {
            this.fireEvent("goToAboutMeCommand", this);
        }
    });

Up on clicking each item on this list, I want to load a new content on the page. so far i was able to do this: app/controller/app.js (as per the Git structure)

 refs: {
            main : 'main',
            navigation : 'navigation',
            navBtn: 'button[name="nav_btn"]',
            aboutView: "AboutViewType"
        },
 navigationView: {
                    itemtap: function (list, index, target, record) {
                        this.toggleNav();
                    },
                   // This is new line
                    goToAboutMeCommand: "onGoToAboutMeCommand"
                },
.....
  ......
 onGoToAboutMeCommand: function () {
        console.log("onGoToAboutMeCommand");
        this.showAboutMe();
    },
showAboutMe: function () {
        Ext.Viewport.setActiveItem(this.getAboutView());
    }

When user clicks on any of the items in the slide menu, it will fire "onAboutButtonTap" and loads the AboutView content, but nav menu doesn't work after that not sure if I am doing this right. Also if you see the GIT code and demo there is home icon on demo, I want to attach a click event for that home icon and when user clicks on it it should go the main view.

here is my app/view/AboutView.js

Ext.define('SlideNav.view.AboutView', {
    extend: 'Ext.TabPanel',
    xtype: 'AboutViewType',
    config: {
        tabBarPosition: 'bottom',
        items: [{
            title: 'Home',
            iconCls: 'home',
            xtype: 'formpanel',
            html: ['About me page'].join(''),
            styleHtmlContent: true,
            items: [{
                xtype: 'titlebar',
                title: 'Page Title',
                docked: 'top',
                items: [{
                    align: 'left',
                    name: 'nav_btn',
                    iconCls: 'list',
                    ui: 'plain'
                }]
            }]
        }]
    }
});

Updated as per @Anand suggestion:

 navigationView: {
                itemtap: function (list, index, target, record) {
                    this.navigationHandler(record);
                    this.toggleNav();
                }

 navigationHandler: function (record) {
        switch (record.get('action')) {
            default:
                {
                    Ext.Msg.alert("Action Name", record.get('action'));
                    Ext.Viewport.setActiveItem(this.getAboutView(), this.slideRightTransition);
                }
        }
    },

It changes the content of the page with about me content and looks good, but on top left I have this slide menu icon, when I click it, it will not fire the toggleNav() function

Noticed problem

In the below function, I am adding About view which is load fine, but I am not loading the navigation view to the screen, that is why i cannot see the navigation view items there. How would I load two views on to the viewport while setting one as active.

navigationHandler: function (record) { switch (record.get('action')) { default: { Ext.Viewport.setActiveItem(this.getAboutView(), this.slideRightTransition); //Ext.Viewport.add(this.getNavigationView(), this.slideRightTransition); } } },

Answer 1

In the given repository, you can see App.js file inside controller . There is

navigation : {
        itemtap : function(list, index, target, record){
                      this.toggleNav(); 
                      this.navigationHandler(record);       // ADDED BY ANAND for handling the navigation                                                                           
                  }
            }

Add the navigationHandler method, through which you can navigate to different views like below:

navigationHandler: function(record) {

        switch(record.get('action')) {
            case 'about': // Do what you want
                         .......
        }
}

-------------- EDIT -------------------------------

As far as I have understood, You are not able to toggle on tap of navigation button on the top toolbar. For that you can see app.js file where

refs:{
        main : 'main',
        navigation : 'navigation',
        navBtn : 'button[name="nav_btn"]'
     },

control : {
        navBtn : {
             tap : 'toggleNav' // THIS IS responsible for toggling ON TAP OF NAV BUTTON
                 },

        navigation : {
            itemtap : function(list, index, target, record){
                            this.toggleNav();   
                            this.navigationHandler(record);                                  
                           }
                     }
         }

And inside navigationHandler, you can animate different views like below:

parentPanel.animateActiveItem(childPanel, animation);

Note: parentPanel should be in card layout.

Happy Coding! :)

Answer 2

This is how I could make it work fully.

app.js

Ext.Loader.setPath({
    'Ext': 'Lib/touch-2.4.1/src',
    'HaBoMobile': 'app'
});

Ext.application({
    name: 'HaBoMobile',
    controllers: ['AppController'],
    launch: function () {
    }
});

AppController.js

Ext.define('HaBoMobile.controller.AppController', {
    extend: 'Ext.app.Controller',
    config: {
        views: ['NavigationMenu','MainView', 'AboutView'],
        refs: {
            nav: {
                selector: 'navigationMenuType',
                xtype: 'navigationMenuType',
                autoCreate: true
            },
            main: {
                selector: 'mainViewType',
                xtype: 'mainViewType',
                autoCreate: true
            },
            about: {
                selector: 'aboutViewType',
                xtype: 'aboutViewType',
                autoCreate: true
            }
        },
        control: {
            'viewport': {
                beforehidemenu: 'beforeHideNav'
            },
            'button[action=nav]': {
                tap: 'showNav'
            },
            'button[ui=decline]': {
                tap: 'hideNav'
            },
            'button[action=nav_option]': {
                tap: 'handleNavigation'
            }
        }
    },

    init: function () {
        var navMenu = this.getNav();
        Ext.Viewport.setMenu(navMenu, {
            side: 'left',
            reveal: true
        });
        Ext.Viewport.add(this.getMain());
    },

    showNav: function () {
        Ext.Viewport.showMenu('left');
        Ext.fly('appLoadingIndicator').destroy();
    },

    beforeHideNav: function () {
        console.log('beforehidemenu returning false');
        // returning false will prevent the hide
        return false;
    },
    hideNav: function () {
        Ext.Viewport.hideMenu('left');
    },

    handleNavigation: function (btn) {
        switch (btn.getItemId()) {
            case 'aboutLink':
                var aboutView = Ext.Viewport.child('aboutViewType');
                if (!aboutView) {
                    aboutView = this.getAbout();
                    Ext.Viewport.add(aboutView);
                }
                Ext.Viewport.setActiveItem(aboutView);
                break;
            default:
                var mainView = Ext.Viewport.child('mainViewType');
                if (!mainView) {
                    mainView = this.getMain();
                    Ext.Viewport.add(mainView);
                }
                Ext.Viewport.setActiveItem(mainView);
        }
        this.hideNav();
    }
});

view/NavigationMenu.js

Ext.define('HaBoMobile.view.NavigationMenu', {
    extend:'Ext.Menu',
    xtype: 'navigationMenuType',
    config: {
        scrollable: {
            direction: 'vertical',
            directionLock: true
        },
        width: 180,  // Need to set a width 
        items: [{
            text: 'Close',
            ui: 'decline'
        }, {
            action: 'nav_option',
            itemId: 'homeLink',
            title: 'Home',
            iconCls: 'home',
            text: 'Home'

        }, {
            action: 'nav_option',
            itemId: 'aboutLink',
            title: 'About Me',
            iconCls: 'info',
            text: 'About'
        }]
    }
});

MainView.js

Ext.define('HaBoMobile.view.MainView', {
    extend: 'Ext.Container',
    xtype: 'mainViewType',
    html: ['Welcome to my Main page'].join(''),
    config: {
        scrollable: {
            direction: 'vertical',
            directionLock: true
        },
        fullscreen: true,
        items: [{
            docked: 'top',
            xtype: 'titlebar',
            title: 'Harsha Bopuri',
            items: [{
                text: 'Menu',
                action: 'nav',
                iconCls: 'list'
            }]
        }]
    }
});

AboutView.js

Ext.define('HaBoMobile.view.AboutView', {
    extend: 'Ext.Container',
    xtype: 'aboutViewType',
    html:'Learn more about me',
    config: {
        scrollable: {
            direction: 'vertical',
            directionLock: true
        },
        fullscreen: true,
        items: [{
            docked: 'top',
            xtype: 'titlebar',
            items: [{
                text: 'Menu',
                action: 'nav',
                iconCls: 'list'
            }]
        }]
    }
});

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Harsha Bopuri</title>
    <script src="Lib/touch-2.4.1/sencha-touch-debug.js"></script>
    <link href="Lib/touch-2.4.1/resources/css/sencha-touch.css" rel="stylesheet" />
    <script src="app.js"></script>
    <script src="Lib/touch-2.4.1/microloader/development.js"></script>
    <link href="app/styles.css" rel="stylesheet" />
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>

</body>
</html>

Hope this solution will be useful for someone who are looking for slide-out menu using Sencha touch

Also I have a article that talks about jQuery Mobile vs Sencha Touch