Sencha Touch2 后退按钮的导航应用-优快云博客

本文链接：https://blog.youkuaiyun.com/peter20082008/article/details/84225338

本文介绍如何在Sencha Touch 2应用中实现基于路由的导航功能，包括设置不同的路由规则和响应导航事件的具体实现方法。

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

Sencha Touch2 后退按钮的导航应用
系统中设置几个routes的路由


      routes: {
	    'form/:id':'showFormDetailByDocId',
            'flow/:id': 'showDetailById',
            'menu/:id': 'showMenuById',
            'flowtracking/:id':'showFlowTrackingById'
        }

主要界面
[img]http://dl.iteye.com/upload/attachment/0068/7852/9dc25d94-3b48-3b5a-a0fe-53b0e4fb3f7d.jpg[/img]
在界面中Tap一条记录后,侦听它的Tap事件,添加一个路径


onNavTap:function(list,index,target,record,e,eopts){
		 var record = list.getStore().getAt(index);
		 this.getApplication().getHistory().add(
            Ext.create('Ext.app.Action', {url: 'form/' + record.get('docid')})
         );
},

查看表单信息
[img]http://dl.iteye.com/upload/attachment/0068/7846/75e87e14-02e2-367c-b784-db97829ff82f.jpg[/img]
执行已经设置好的代码


        showFormDetailByDocId:function(id){
		var view = new app.view.AppForm();
		var nav    = this.getNav();
		nav.parent.setActiveItem(view);
	},

查看流程跟踪信息
[img]http://dl.iteye.com/upload/attachment/0068/7848/673413eb-e0f4-387d-b503-f8b9b35f016e.jpg[/img]
执行已经设置好的代码


    showFlowTrackingById:function(id){
		var aview = new app.view.TrackingList();
		var nav = this.getNav(),
		 layout = nav.getLayout(),
         initialAnim = layout.getAnimation(),
         newAnim;
         nav.parent.setActiveItem(aview);
	},

点击Back按钮执行 JavaScript 的js原生代码 history.back()即可