sencha route实现浏览器及Android返回按钮页面返回

最新推荐文章于 2022-12-07 22:54:38 发布

bboonnee

最新推荐文章于 2022-12-07 22:54:38 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 sencha

本文链接：https://blog.youkuaiyun.com/yiboo/article/details/8833361

html5 同时被 2 个专栏收录

26 篇文章

订阅专栏

sencha

17 篇文章

订阅专栏

本文详细介绍了如何在Sencha框架中通过设置历史路径和定义route事件来实现页面之间的跳转和浏览器返回按钮的操作。通过在main入口处加入历史路径，并在controller中定义对应的route事件，使得页面跳转变得灵活且符合用户预期。同时，文章还展示了如何在相应按钮事件中调用history方法来实现页面间的导航，以及如何通过history.back()响应返回按键，从而创建了一个流畅的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sencha如果不做设置，是一个framework页面，当点击浏览器返回或者Android的返回键的时候会跳出页面或整个程序
所以需要实现route路径
网上么有特别详细的说明，研究了很久分享一个
首先，需要在main的地方开始就加入历史路径。在app.js
launch: function() {
//增加历史路径，设定main为home
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
            url: 'home'
        }));
//初始化main
Ext.create('MBAPeople.view.Main', {fullscreen:true});
}
其次，在controller中定义route事件
routes: {
            'home': 'homejump',
            'changepass':'changejump'
        },
home 是名字，后面的是方法
changejump:function(){
        var form = this.getChangepassword();
        Ext.Viewport.setActiveItem(form)
    },
    homejump:function(){
        var form = this.getMainview();
        Ext.Viewport.setActiveItem(form)
    },
然后，就在相应button的事件中调用
在点击changepassword按钮中写入不是setActiveitem，而是history
onBtnTap:function(){
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
                 url: 'changepass'
                 }));
}
而在返回按键可以直接使用                            history.back();
handler: function() {
                            history.back();
                        }

这样，在我们初始化main的时候，大家会发现首页地址为localhost/app/#home,而跳转页面地址为localhost/app/#changepass,成为了两个页面，自然可以实现返回按钮