因为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 框架的默认处理

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消息的监听器

/*定义登录面板*/
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

   BBGlobalData.exitApp = function() {
   navigator.app.exitApp();
}

4. 实现页面跳转的处理（主页面采用card view，类似于扑克的翻牌）

BBGlobalData.gotoHomePanel = function() {
   BBGlobalData.mainPanel.setActiveItem(1);
}

总结：其实总的解决方法还是很简单，只要把整体的框架搭建完善了，很容易就能在多平台之间转换了。

Sencha Touch 程序设计之 Android 平台 Back 按键处理，首发于润物无声。

学习Sencha Touch，改写了别人的一个APP，一个记事本程序，详细的E文请参照《writing a sencha touch application》。

笔记本程序的运行效果图如下(分别是笔记列表和笔记编辑页面)：

当时设计该程序的代码基于Sencha Touch1.1.0，现在Sencha Touch已经发布了2.0版本，所以里面有很多代码已经无法正常工作了，本文还是按照作者当初的设计思路，重新基于Sencha Touch2.0进行了编码工作，程序已经可以正常运行，后面附上本程序的JS源码：

var App = new Ext.application({
name : 'NotesApp',
useLoadMask : true,

launch : function () {
notesListToolbar = Ext.create('Ext.Toolbar', {
id: 'notesListToolbar',
docked: 'top',
title: '记事本',
layout: 'hbox',
items: [
{ xtype: 'spacer' },
{
id: 'newNoteButton',
text: '新建笔记',
ui: 'action',
handler: function () {
var now = new Date();
var noteId = now.getTime();
var note = Ext.ModelMgr.create(
{ id: noteId, date: now, title: '', narrative: '' },
'Note'
);

noteEditor.setRecord(note);
Ext.Viewport.setActiveItem('noteEditor', {type: 'slide', direction: 'left'});
}
}
]
});

Ext.regModel('Note', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'narrative', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title', message: '请输入笔记的标题!' }
]
});

Ext.regStore('NotesStore', {
model: 'Note',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'notes-app-localstore'
},
getGroupString: function (record) {
if (record && record.data.date) {
return record.get('date').toDateString();
} else {
return '';
}
},
});

notesList = Ext.create('Ext.List', {
id: 'notesList',
store: 'NotesStore',
grouped: true,
emptyText: '<div style="margin: 5px;">目前还没有创建笔记.</div>',
loadingText: '正在读取笔记 ...',
itemTpl: '<div class="list-item-title">{title}</div>' +
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure: function (record) {
var selectedNote = record;
noteEditor.setRecord(selectedNote);
Ext.Viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
},
listeners: {
'render': function (thisComponent) {
thisComponent.getStore().load();
},
}
});

notesListContainer = Ext.create('Ext.Panel', {
id : 'notesListContainer',
layout : 'fit',
items: [notesListToolbar, notesList],
html: 'This is the notes list container'
});

noteEditorTopToolbar = Ext.create('Ext.Toolbar', {
title: '编辑笔记',
docked: 'top',

items: [
{
text: '记事本',
ui: 'back',
handler: function () {
Ext.Viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
},
{ xtype: 'spacer' },
{
text: '保存',
ui: 'action',
handler: function () {
var currentNote = noteEditor.getRecord();
// Update the note with the values in the form fields.
noteEditor.updateRecord(currentNote);

var errors = currentNote.validate();
if (!errors.isValid()) {
currentNote.reject();
Ext.Msg.alert('请等待...', errors.getByField('title')[0].getMessage(), Ext.emptyFn);
return;
}

var notesStore = notesList.getStore();

if (notesStore.findRecord('id', currentNote.data.id) === null) {
notesStore.add(currentNote);
} else {
currentNote.setDirty();
}

notesStore.sync();
notesStore.sort([{ property: 'date', direction: 'DESC'}]);

notesList.refresh();

Ext.Viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
}
]
});

noteEditorBottomToolbar = Ext.create('Ext.Toolbar', {
docked: 'bottom',

items: [
{ xtype: 'spacer' },
{
iconCls: 'trash',
iconMask: true,
handler: function () {
var currentNote = noteEditor.getRecord();
var notesStore = notesList.getStore();

if (notesStore.findRecord('id', currentNote.data.id)) {
notesStore.remove(currentNote);
}

notesStore.sync();

notesList.refresh();
Ext.Viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
}
]
});

noteEditor = Ext.create('Ext.form.FormPanel',{
id: 'noteEditor',
items: [
noteEditorTopToolbar,
{
xtype: 'textfield',
name: 'title',
label: '笔记标题',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: '笔记内容'
},
noteEditorBottomToolbar
]
});

mainPanel = Ext.create('Ext.Panel', {
fullscreen: true,
layout : 'card',
cardAnimation : 'slide',
items: [notesListContainer, noteEditor]
});

Ext.Viewport.add(mainPanel);
}
})

有兴趣学习Sencha Touch的童鞋，该sample还是一个不错的入门选择，接下来再挑选几个不错的sample来update。

Sencha Touch 程序设计体验之笔记本，首发于润物无声。

1. 客户端浏览器调试Ajax请求报错“Origin null is not allowed by Access-Control-Allow-Origin. ”

解决办法：谷歌浏览器 chrome.exe --disable-web-security

2. PhoneGap 远程调试

远程调试架构图如下所示：

配置步骤如下：

a. 登录网址：http://debug.phonegap.com/ 填写配置信息

b. 在本地代码中引用远程调试JS代码文件

c. 打开远程调试窗口http://debug.phonegap.com/client/#bbshow （bbshow为第一步骤配置的名字）

在调试窗口中可以修改节点的属性，然后手机上的画面就会自动更新了。

3.  常用的代码总结

a. 设计 Ajax 数据通信（如用户登录）

/*
用户登录模块

params = {};
params.username 登录用户名
params.password 登录用户密码

succcb  登录成功时候的回调函数 function(data);
errcb   登录失败时候的回调函数 function(text);
*/
function bb_login(params, succcb, errcb)
{
   var tmplate = login_req_xml(params);

   doPost(tmplate, function(data, textStatus, jqXHR) {
      if (data.status == 0) {
          errcb(data.info);
      } else {
          GServerData.curToken = data.data;
          succcb(data.data);
      }
   }, function(jqXHR, textStatus, errorThrown) {
         errcb(textStatus);
   });
}

/*用户登录的模板文件*/
function login_req_xml(params)
{
  var tmplate = '<?xml version="1.0" encoding="utf-8"?>'
       + '<request>'
       + '<operation>'
       + '<module>token</module>'
       + '<action>login</action>'
       + '<params>'
       + '<username>' + params.username + '</username>'
       + '<password>' + params.password + '</password>'
       + '</params>'
       + '</operation>'
       + '</request>';
   return  tmplate;
}

/*
向服务器发送 POST 请求.

data: 向服务器发送的数据内容
succcb: 成功时候的回调函数 success(data, textStatus, jqXHR)
errcb:  失败时候的回调函数 error(jqXHR, textStatus, errorThrown)
*/
function doPost(data, succcb, errcb)
{
   $.ajax({
      type: "POST",
      url: Config.serverapi,
      data: data,
      cache: false,
      dataType: "json",
      success: succcb,
      error: errcb
   });
}

b.  数据缓存

/*
dataUrl 请求数据的网络URL地址
如果缓存成功，则会返回本地的File地址

succcb 登录成功时候的回调函数 function(data);
errcb 登录失败时候的回调函数 function(text);
*/
function bb_loadCacheData(dataurl, succcb, errcb)
{
  var errorCB = function (err) {
      console.log("Error processing : " + err.code);
      errcb("Error processing : " + err.code);
  }

var downLoadFile = function(db) {
  console.log("downLoadFile ... [" + dataurl + "]");

   //特别备注：在Phonegap1.5.0中，LocalFileSystem.TEMPORARY 和 LocalFileSystem.PERSISTENT 两者相反了
   window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
        var datadate = new Date().getTime();
        var filename = datadate + '_' + dataurl.substr(dataurl.lastIndexOf('/')+1);

        var fileTransfer = new FileTransfer();

        fileTransfer.download(
           dataurl,
           fileSystem.root.fullPath.substr("file://".length) + Config.datacachepath + filename,
           function(entry) {
               console.log("download complete: " + entry.fullPath);
               db.transaction(function (tx) {
                   tx.executeSql('INSERT INTO data_cache (dataurl, datapath, datadate) VALUES ("' + dataurl + '","' + entry.fullPath + '","' + datadate + '")');
               succcb(entry.fullPath);
               }, errorCB);
           },
          function(error) {
              console.log("download error source " + error.source);
              console.log("download error target " + error.target);
              console.log("download error code " + error.code);
              errcb("download error code " + error.code);
          }
      ); 
     }, errorCB);
   };

   var db = window.openDatabase("cache.db", "1.0", "BBShow Data Cache DB", 200000);
   db.transaction(function (tx) {
      tx.executeSql('CREATE TABLE IF NOT EXISTS data_cache (id unique, dataurl, datapath, datadate)');
      tx.executeSql('SELECT * FROM data_cache WHERE dataurl=?', [dataurl], function(tx, results) {
      if (results.rows.length > 0) {
         window.resolveLocalFileSystemURI(results.rows.item(0).datapath, function(fileEntry) {
              console.log(fileEntry.fullPath);
              succcb(fileEntry.fullPath);
         }, function(error) {
              console.log("Unable to resolveLocalFileSystemURI: " + error.code);
              db.transaction(function (tx) {
              tx.executeSql('DELETE FROM data_cache WHERE dataurl=?', [dataurl]);
              downLoadFile(db);
         }, errorCB);
        });
      } else {
          downLoadFile(db);
      }
     }, errorCB);
   }, errorCB);
}

总之，这两天才发现 PhoneGap不是一般的难用，真应该再多完善完善！！！

编写 PhoneGap 程序调试问题解决方案，首发于润物无声。