Question

我在这里有两个问题：

点击幻灯片导航中的列表项加载新页面内容
点击屏幕底部的主页图标，使用返回主视图

我已按照以下代码示例获取Facebook菜单

步骤：Described steps
Git代码：Repo URL
演示网站：Tutorial demo url

我已成功按照演示获得滑动菜单，但我无法为菜单和主页图标中的所有项目设置点击事件。

这是我想要做的。 app/views/Navigation.js （根据演示代码结构）

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

点击此列表中的每个项目，我想在页面上加载新内容。到目前为止，我能够做到这一点： app/controller/app.js （根据Git结构）

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

当用户点击幻灯片菜单中的任何项目时，它会触发＆＃34; onAboutButtonTap ＆＃34;并加载AboutView内容，但导航菜单在此之后无法正常工作不确定我是否正确执行此操作。此外，如果您看到GIT代码和演示，演示中有主页图标，我想为该主页图标附加一个点击事件，当用户点击它时，它应该进入主视图。

这是我的 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'
                }]
            }]
        }]
    }
});

根据@Anand建议更新：

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

它改变了关于我内容的页面内容并且看起来不错，但是在左上角我有这个幻灯片菜单图标，当我点击它时，它不会触发toggleNav()功能

注意到问题

在下面的函数中，我正在添加关于视图的加载正常，但我没有将导航视图加载到屏幕，这就是为什么我看不到那里的导航视图项目。如何将两个视图加载到视口，同时将一个视图设置为活动状态。

navigationHandler：function（record）{ switch（record.get（＆＃39; action＆＃39;））{ 默认： { Ext.Viewport.setActiveItem（this.getAboutView（），this.slideRightTransition）; //Ext.Viewport.add（this.getNavigationView（），this.slideRightTransition）; } } }，

Answer 1

在给定的存储库中，您可以看到App.js file inside controller。有

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
                         .......
        }
}

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

据我所知，您无法在顶部工具栏上点按导航按钮。为此，您可以看到app.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);

注意：parentPanel应该是card布局。

快乐的编码！：）

Answer 2

这就是我可以让它完全运作的方式。

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

查看/ 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>

希望此解决方案对于使用Sencha touch

寻找幻灯片菜单的人有用

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

在滑动导航项上的Sencha Touch点击事件

2 个答案: