phonegap + sencha touch 监控backbutton按钮返回事件切换页面

前提：

sencha cmd创建好sencha项目，安装好cordova环境。

详细配置过程

sencha:http://docs-origin.sencha.com/cmd/5.x/touch/cmd_app.html

cordova:http://cordova.apache.org/docs/en/5.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

 

在项目中cordova/www/index.js绑定对backbutton的事件监控

 

 

bindEvents: function(){
        document.addEventListener('deviceready', this.onDeviceReady, false);	
        document.addEventListener("backbutton", eventBackButton, false); //返回键
}

 对应eventBackButton代码

function eventBackButton(){
	//confirm("再点击一次退出!");
	window.plugins.toast.showShortBottom('再点击一下返回，将退出私募通。');
	document.removeEventListener("backbutton", eventBackButton, false); //注销返回键
	//3秒后重新注册
	var intervalID = window.setInterval(function(){
		window.clearInterval(intervalID);
		document.addEventListener("backbutton", eventBackButton, false); //返回键
	},3000);
}

这样设置完后就可以监控到android设备的back按钮事件，防止点击back键后直接退出。

方法中用户的 window.plugins.toast.showShortBottom 是cordova插件，安装地址是https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin

 

界面间如何在sencha touch中使用back键进行跳转。

sencha touch页面布局逻辑为，Main.js采用card布局，其他子页面动态添加到Main中，如何使用back键进行页面间跳转。这里主要使用card布局的activeitemchange事件，在页面切换时触发此事件，进行back按钮的事件注册。

 

layout: {
	type : 'card',
	animation : 'scroll',
	listeners : {
		'activeitemchange' : function(lay,newActiveItem,oldActiveItem){
			var newActiveItemBackHandler;
			if(newActiveItem){
				newActiveItemBackHandler = newActiveItem.backButtonHandler || newActiveItem.config.backButtonHandler;
			}
			var oldActiveItemBackHandler;
			if(oldActiveItem){
				oldActiveItemBackHandler = oldActiveItem.backButtonHandler || oldActiveItem.config.backButtonHandler;
			}
			if(newActiveItemBackHandler){	// 绑定打开页面的返回按钮事件
				document.removeEventListener("backbutton", eventBackButton, false);
				if(oldActiveItemBackHandler){
					document.removeEventListener("backbutton", oldActiveItemBackHandler,false);
				}
				document.addEventListener("backbutton", newActiveItemBackHandler, false);
			}else{
				if(oldActiveItemBackHandler){
					document.removeEventListener("backbutton", oldActiveItemBackHandler, false);
					document.addEventListener("backbutton", eventBackButton, false);
				}
			}
		}
	}
}

 

 

newActiveItem，oldActiveItem分别对应新页面和旧页面。

在每个页面里可以自定义委托方法，进行页面间逻辑跳转。

 

backButtonHandler : function(event){	
	// 防止弹出分享菜单后，back键返回上一页
	var socialShareView = Ext.getCmp('_SocialShareView');
	if(socialShareView!=null&&!socialShareView.isHidden()){
		return true;
	}
        // 防止android back键在弹出窗户后返回到上一页
	if(Ext.Msg.isHidden()!=null&&!Ext.Msg.isHidden()){
		return;
	}
	var mainView = Ext.getCmp('_MainView');
	var fromView = Ext.getCmp('_EpNeedDetailView').getFromViewString();
	if(fromView == "collect"){		// 返回我的收藏
		mainView.animateActiveItem(mainView.myCollectView,{type: 'slide', direction: 'right'});
	}else{							// 返回首页
		var	topView = Ext.getCmp('_TopView');
		mainView.animateActiveItem(topView,{type: 'slide', direction: 'right'});
	}
}

这样就可以通过委托方法，控制页面间跳转了。

还需要注意一点，在返回事件委托方法中，要判断一下当前页面有没有Ext.Msg元素，如果有的话需要禁止backButtonHandler的执行。