我在这里有两个问题：
我已按照以下代码示例获取Facebook菜单
我已成功按照演示获得滑动菜单，但我无法为菜单和主页图标中的所有项目设置点击事件。
这是我想要做的。 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）; } } }，
答案 0 :(得分：0)
在给定的存储库中，您可以看到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布局。
快乐的编码！ ：）
答案 1 :(得分：-1)
这就是我可以让它完全运作的方式。
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