如何处理sencha touch应用程序上的设备后退按钮

Question

在Sencha touch中，如果我使用导航视图，我可以返回按钮。这很好。

但是，如果用户点击设备后退按钮？它直接退出了应用领域。在我的要求中，它不应该退出应用程序，它必须返回到前一个屏幕。我该如何做到这一点？

Answer 1

您可以处理硬件后退按钮这样的：

if (Ext.os.is('Android')) { 
    document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false); 

    function onBackKeyDown(eve) { 

     eve.preventDefault(); 

     //do something 
     alert('back button pressed'); 

    } 
} 

Answer 2

我在历史记录支持页面上没有找到有用的说明;无论如何，在处理导航视图时，无论如何都无法使用路线，导航视图随时可能有大量视图。

如果您只是希望后退按钮能够正常工作，则可以使用popstate和pushstate函数（请参阅https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history以供参考）。这个想法就是你push在添加视图时的状态，当删除视图时pop关闭。 Android手机上的物理后退按钮或桌面浏览器上的后退按钮有效呼叫history.back();所以你需要做的就是确保按下标题栏上的后退按钮不变，这是触发导航视图弹出的那个按钮。

要利用它在煎茶触摸工作，我添加以下到主控制器：

在裁判我有到main视图（的Ext.navigation.View实例）的引用和其标题栏，从中可以钩到后退按钮例如的情况下：

refs: { 
     main: 'mainview', 
     mainTitleBar: 'mainview titlebar', 
}... 

我经由control配置对象附加以下功能..

control: { 
     main: { 
      push: 'onMainPush' 
     }, 
     mainTitleBar: { 
      back: 'onBack' 
     }, 
     ... 

这些被定义为：

onMainPush: function(view, item) { 
     //do what ever logic you need then.. 
     history.pushState(); 
    }, 
    onBack: function() { 
     history.back(); //will cause the onpopstate event to fire on window.. 
     //prevent back button popping main view directly.. 
     return false; 
    }, 

我然后附上当该状态通过的init函数弹出以执行功能..

init: function() { 
    /* pop a view when the back button is pressed 
     note: if it's already at the root it's a noop */ 
    var that = this; 
    window.addEventListener('popstate', function() { 
     that.getMain().pop(); 
    }, false); 
}, 

现在，按压背面上的标题栏，执行history.back() ，这又会触发popstate事件，然后导致主视图弹出。

如果你想看到这个工作在一个真实的应用程序，有一个（v。basic！）财产取景器应用程序在github上使用这种技术here。