如何在sencha触摸应用程序上处理设备后退按钮

Question

在Sencha触摸如果我使用导航视图我可以回来按钮.这很好.

但是如果用户点击设备后退怎么办？它是直接退出应用程序.在我的要求中,它不应该退出它必须返回到前一个屏幕的应用程序.我怎么能这样做？

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(); 因此,您需要做的就是确保按下标题栏上的后退按钮执行相同操作,并且触发导航视图弹出.

为了使用它在Sencha Touch中工作,我将以下内容添加到主控制器:

在refs中,我引用了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事件,然后导致主视图弹出.

如果你想看到这个在真正的应用程序上运行,那么在github上有一个(v.basic!)属性查找器应用程序在这里使用这个技术.