利用 Sencha Touch 结合PhoneGap设计本地APP，免不了要分别处理android平台和iphone平台，两个平台的最大区别之一就是back键的处理。iphone平台没有back按键，只有home按键，按下该键的话程序会自动转入后台处理，该按键的效用等同于android平台的home按键，但是，android平台特殊的地方在于，它还有一个back键，熟悉了android平台的开发者或使用者，把该键的作用理解为退回程序的上一个页面，如果程序已经在主页面，此时则退出程序。
因为Sencha Touch对android平台进行了消息封装，默认对back键的处理，同home键的处理一致，这令很多android开发者或使用者使用其功能的话不太友好，我自己在调试程序的过程中就误操作过了N次，每次按下back键期望程序回退到上一个页面，没想到程序直接消失了，转到后台去了。
网上搜索了一些解决方案，各有利弊，汇总贴可参照Sencha Touch官方论坛《Why-can-t-I-control-Android-phone-s-hardware-Back-button-in-Sencha-with-PhoneGap》，下面介绍一下我设计的一个解决方案，在实测环境中工作良好，总结如下：
1. 首先在Sencha 启动代码中捕获android平台的back按键消息，阻止Sencha 框架的默认处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | var App = new Ext.application({ // ... APP 配置参数 launch : function () { // ... 界面初始化 BBGlobalData.mainPanel = Ext.create('Ext.Panel', { fullscreen: true, layout : 'card', cardAnimation : 'slide', items: [ Ext.create('BBShow.view.LoginPanel'), Ext.create('BBShow.view.HomePanel'), Ext.create('BBShow.view.MediaPanel'), Ext.create('BBShow.view.PicCarousel'), Ext.create('BBShow.view.ReportListPanel'), Ext.create('BBShow.view.ReportPanel'), ] }); Ext.Viewport.add(BBGlobalData.mainPanel); document.addEventListener('deviceready', function () { console.log('deviceready'); document.addEventListener("backbutton", function () { console.log('user presses the back button on Android'); // 获取当前的焦点页面，并发送自定义消息'back' BBGlobalData.mainPanel.getActiveItem().fireEvent('back'); }, false); }, false); } }) |
var App = new Ext.application({
// ... APP 配置参数
launch : function () {
// ... 界面初始化
BBGlobalData.mainPanel = Ext.create('Ext.Panel', {
fullscreen: true,
layout : 'card',
cardAnimation : 'slide',
items: [
Ext.create('BBShow.view.LoginPanel'),
Ext.create('BBShow.view.HomePanel'),
Ext.create('BBShow.view.MediaPanel'),
Ext.create('BBShow.view.PicCarousel'),
Ext.create('BBShow.view.ReportListPanel'),
Ext.create('BBShow.view.ReportPanel'),
]
});
Ext.Viewport.add(BBGlobalData.mainPanel);
document.addEventListener('deviceready', function () {
console.log('deviceready');
document.addEventListener("backbutton", function () {
console.log('user presses the back button on Android');
// 获取当前的焦点页面，并发送自定义消息'back'
BBGlobalData.mainPanel.getActiveItem().fireEvent('back');
}, false);
}, false);
}
})2. 在子页面中注册back消息的监听器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /*定义登录面板*/ Ext.define('BBShow.view.LoginPanel', { extend: 'Ext.Panel', config: { items: [ { xtype: 'titlebar', docked: 'top', title: '用户登录' }, // 其他页面内容 ], listeners: [ { fn: 'onBack', event: 'back', //注册监听自定义back按键消息 } ] }, onBack: function() { //BBGlobalData.gotoHomePanel(); //如，跳转到其他页面 BBGlobalData.exitApp(); //或退出程序 }, }); |
/*定义登录面板*/
Ext.define('BBShow.view.LoginPanel', {
extend: 'Ext.Panel',
config: {
items: [
{
xtype: 'titlebar',
docked: 'top',
title: '用户登录'
},
// 其他页面内容
],
listeners: [
{
fn: 'onBack',
event: 'back', //注册监听自定义back按键消息
}
]
},
onBack: function() {
//BBGlobalData.gotoHomePanel(); //如，跳转到其他页面
BBGlobalData.exitApp(); //或退出程序
},
});3. 实现退出程序的处理，借助于PhoneGap
1 2 3 | BBGlobalData.exitApp = function() { navigator.app.exitApp(); } |
BBGlobalData.exitApp = function() {
navigator.app.exitApp();
}4. 实现页面跳转的处理（主页面采用card view，类似于扑克的翻牌）
1 2 3 | BBGlobalData.gotoHomePanel = function() { BBGlobalData.mainPanel.setActiveItem(1); } |
BBGlobalData.gotoHomePanel = function() {
BBGlobalData.mainPanel.setActiveItem(1);
}总结：其实总的解决方法还是很简单，只要把整体的框架搭建完善了，很容易就能在多平台之间转换了。
