如何在没有 NavigationView 的情况下处理 sencha 触摸应用程序中的后退按钮？

Posted 2023-02-26

【中文标题】如何在没有 NavigationView 的情况下处理 sencha 触摸应用程序中的后退按钮？

【英文标题】：How to handle back button in sencha touch application without NavigationView?

【发布时间】：2016-04-21 14:09:40

【问题描述】：

我google了一下，所有有用的文章都在描述如何处理NavigationView中的后退按钮，但我只是使用下面的通用视图。

Ext.define('emall.view.MyPage', 
    extend: 'Ext.Container',
    alias: 'widget.mypage',

    requires: [
        'emall.view.topplus',
        'Ext.TitleBar',
        'Ext.Button',
        'Ext.Toolbar'
    ],

我正在对现有应用程序进行更改，因此我无法更改基本架构。 所以我想知道如何处理后退按钮？

我知道下面的方法可以捕获返回按钮事件。（我在app.js中添加了下面的方法）

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

    function onBackKeyDown(eve) 

        eve.preventDefault();
        //do something
        alert('back button pressed');
        history.back();  

    

但是我可以在 onBackKeyDown 方法中做什么呢？因为无论我停留在哪个页面，当我单击后退按钮时都会触发此事件。所以我不能像 Ext.Viewport.animateActiveItem('xxxx') 那样去上一个页面，因为我不知道我要停留的当前页面。

如果我能得到当前页面名称，我可以像下面这样处理它。

if(currentpage=='xxx')
            Ext.Viewport.animateActiveItem('profile', 
                type : 'slide',
                direction:'left'
            );

【问题讨论】：

您是否考虑过使用 Routes 而不是这种方法？如果你的每个组件都有不同的路由，浏览器会自动处理后退按钮。

切换到导航视图应该很容易（导航视图是一个普通的容器，有卡片布局和一些弹出/推送视图的方法），一旦你有了导航视图，你就可以调用 pop 方法，你'完成了。

您可以使用 deactivate 事件将 View 的 xtype 写入全局变量。从那里你可以动画ActiveItem

【参考方案1】：

使用此代码：

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() if (navigator.userAgent.match("Android"))
       document.addEventListener("backbutton", onBackKeyDown, true);    



function onBackKeyDown(e) 
    if (window.location.hash === "#splashviewRoute")       
        navigator.app.exitApp();
       
    else  
        window.history.back();