煎茶触摸幻灯片导航项上的单击事件

在给定的存储库中，您可以在控制器中看到 App.js 文件。有

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

添加 navigationHandler 方法，通过该方法可以导航到不同的视图，如下所示：

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

--------------编辑-------------------------------

据我了解，您无法在顶部工具栏上的导航按钮上切换。为此，您可以看到应用程序.js文件，其中

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

在 navigationHandler 中，您可以像下面这样对不同的视图进行动画处理：

parentPanel.animateActiveItem(childPanel, animation);

注意：父面板应采用card布局。

祝您编码愉快！ :)

这就是我如何使其完全工作。

应用.js

Ext.Loader.setPath({
    'Ext': 'Lib/touch-2.4.1/src',
    'HaBoMobile': 'app'
});
Ext.application({
    name: 'HaBoMobile',
    controllers: ['AppController'],
    launch: function () {
    }
});

应用控制器.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();
    }
});

视图/导航菜单.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'
        }]
    }
});

主视图.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'
            }]
        }]
    }
});

关于视图.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'
            }]
        }]
    }
});

索引.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>

希望此解决方案对使用Sencha touch寻找滑出菜单的人有用

我还有一篇文章谈到jQuery Mobile与Sencha Touch