<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>润物无声 &#187; Sencha</title>
	<atom:link href="http://blog.zhourunsheng.com/tag/sencha/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.zhourunsheng.com</link>
	<description>天空一朵雨做的云</description>
	<lastBuildDate>Sat, 08 May 2021 05:17:21 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.1.41</generator>
	<item>
		<title>Sencha Touch 程序设计之 Android 平台 Back 按键处理</title>
		<link>http://blog.zhourunsheng.com/2012/04/sencha-touch-%e7%a8%8b%e5%ba%8f%e8%ae%be%e8%ae%a1%e4%b9%8b-android-%e5%b9%b3%e5%8f%b0-back-%e6%8c%89%e9%94%ae%e5%a4%84%e7%90%86/</link>
		<comments>http://blog.zhourunsheng.com/2012/04/sencha-touch-%e7%a8%8b%e5%ba%8f%e8%ae%be%e8%ae%a1%e4%b9%8b-android-%e5%b9%b3%e5%8f%b0-back-%e6%8c%89%e9%94%ae%e5%a4%84%e7%90%86/#comments</comments>
		<pubDate>Mon, 09 Apr 2012 07:23:40 +0000</pubDate>
		<dc:creator><![CDATA[润物无声]]></dc:creator>
				<category><![CDATA[移动开发]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[PhoneGap]]></category>
		<category><![CDATA[Sencha]]></category>
		<category><![CDATA[WebApp]]></category>

		<guid isPermaLink="false">http://blog.zhourunsheng.com/?p=1406</guid>
		<description><![CDATA[<p>利用 Sencha Touch 结合PhoneGap设计本地APP，免不了要分别处理android平台和iph [&#8230;]</p>
<p><a rel="nofollow" href="http://blog.zhourunsheng.com/2012/04/sencha-touch-%e7%a8%8b%e5%ba%8f%e8%ae%be%e8%ae%a1%e4%b9%8b-android-%e5%b9%b3%e5%8f%b0-back-%e6%8c%89%e9%94%ae%e5%a4%84%e7%90%86/">Sencha Touch 程序设计之 Android 平台 Back 按键处理</a>，首发于<a rel="nofollow" href="http://blog.zhourunsheng.com">润物无声</a>。</p>
]]></description>
				<content:encoded><![CDATA[<p>利用 Sencha Touch 结合PhoneGap设计本地APP，免不了要分别处理android平台和iphone平台，两个平台的最大区别之一就是back键的处理。iphone平台没有back按键，只有home按键，按下该键的话程序会自动转入后台处理，该按键的效用等同于android平台的home按键，但是，android平台特殊的地方在于，它还有一个back键，熟悉了android平台的开发者或使用者，把该键的作用理解为退回程序的上一个页面，如果程序已经在主页面，此时则退出程序。</p>
<p>因为Sencha Touch对android平台进行了消息封装，默认对back键的处理，同home键的处理一致，这令很多android开发者或使用者使用其功能的话不太友好，我自己在调试程序的过程中就误操作过了N次，每次按下back键期望程序回退到上一个页面，没想到程序直接消失了，转到后台去了。<span id="more-1406"></span></p>
<p>网上搜索了一些解决方案，各有利弊，汇总贴可参照Sencha Touch官方论坛《<a href="http://www.sencha.com/forum/showthread.php?133948-Why-can-t-I-control-Android-phone-s-hardware-Back-button-in-Sencha-with-PhoneGap">Why-can-t-I-control-Android-phone-s-hardware-Back-button-in-Sencha-with-PhoneGap</a>》，下面介绍一下我设计的一个解决方案，在实测环境中工作良好，总结如下：</p>
<p>1. 首先在Sencha 启动代码中捕获android平台的back按键消息，阻止Sencha 框架的默认处理</p>
<pre>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);
}
})</pre>
<p>2. 在子页面中注册back消息的监听器</p>
<pre>/*定义登录面板*/
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(); //或退出程序
  },
});</pre>
<p>3. 实现退出程序的处理，借助于PhoneGap</p>
<pre>   BBGlobalData.exitApp = function() {
   navigator.app.exitApp();
}</pre>
<p>4. 实现页面跳转的处理（主页面采用card view，类似于扑克的翻牌）</p>
<pre>BBGlobalData.gotoHomePanel = function() {
   BBGlobalData.mainPanel.setActiveItem(1);
}</pre>
<p>总结：其实总的解决方法还是很简单，只要把整体的框架搭建完善了，很容易就能在多平台之间转换了。</p>
<p><a rel="nofollow" href="http://blog.zhourunsheng.com/2012/04/sencha-touch-%e7%a8%8b%e5%ba%8f%e8%ae%be%e8%ae%a1%e4%b9%8b-android-%e5%b9%b3%e5%8f%b0-back-%e6%8c%89%e9%94%ae%e5%a4%84%e7%90%86/">Sencha Touch 程序设计之 Android 平台 Back 按键处理</a>，首发于<a rel="nofollow" href="http://blog.zhourunsheng.com">润物无声</a>。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.zhourunsheng.com/2012/04/sencha-touch-%e7%a8%8b%e5%ba%8f%e8%ae%be%e8%ae%a1%e4%b9%8b-android-%e5%b9%b3%e5%8f%b0-back-%e6%8c%89%e9%94%ae%e5%a4%84%e7%90%86/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
