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的执行。