Sencha Touch页面跳转创建返回上一级按钮的设计思路
这段时间开发了一个微博模块,其中涉及到各种页面跳转,例如A页面跳到B页面,B页面又跳到C页面,同时A页面也可以跳到C页面,那么在C页面返回上一级的时候就需要判断是哪个页面跳转进来的,甚至会发生A页面跳到B页面,B页面还能跳到A页面的这种循环跳转,有人会说为什么不用navigationview,navigationview只提供简单的返回上一级功能,如果在返回上一级的操作中还需要判断各种参数的值,或者执行一些查询,或者页面跳转的层次很深,那么navigationview就不那么好用了。刚开始我都是手写的跳转,简单的跳转还行,如果页面跳转复杂的话简直生不如死,那么该如何解决这种情况呢?假设页面是直线跳转,不存在循环跳转,也就是A页面跳到B页面,B页面又跳到C页面,C页面又跳到D页面,并且在跳转页面时创建返回上一级按钮,如下图:
上图一共有四个页面,三个按钮,在点击按钮的时候返回上一级页面并且创建上一级页面的返回按钮,如果是单纯的返回页面,那么完全可以在代码中重新创建一个返回按钮就可以了,但是往往每个返回按钮都担负这很多任务要完成,例如以下是我的微博中的一段代码,作用是跳转到评论页并创建评论页的工具栏:
toCommentTablet:function(id,listName){ var me=this, items=new Array(); items.push( { xtype : "button", iconCls : CommonConstant.BACK_BUTTON_CLS, handler : function() { if (listName=="blogTabletListView") { //创建上一级工具栏 me.createTabletListToolbar(); //返回上级页面 me.getBlogTabletView().setActiveItem(0); }else{ me.backUserInfoTablet(); } } }, { xtype: 'spacer' } ); CommonUtil.createTopTabView("填写评论",items);//创建工具栏的方法 me.getBlogTabletView().setActiveItem("blogTabletCommentFormView"); me.getBlogTabletCommentFormView().reset(); }
其中items中的第一个元素就是返回按钮,handler是它的执行方法,里面用到了变量 listName来判断返回哪个页面,那么问题来了,如果我在评论页面再跳转到其他页面的话,那么从其他页面再返回评论页的时候,这个按钮该怎么创建?因为里面的listName是当时有效的,在其他地方是取不到的,所以这个时候只能在进入评论页的时候把listName保存下来,等到用的时候再取,那既然可以保存listName,是不是也可以把整个工具栏中的内容都保存下来呢?答案是肯定的。那么该怎么保存呢?如果跳转一次页面需要保存一次工具栏内容的话,那么跳转10次就要保存10次,显然不能用10个变量来保存,我们知道java有种数据结构叫“堆栈”,这种情况完全可以用堆栈来解决。我们把上面的修改一下,改后的代码如下:
toCommentTablet:function(id,listName){ var me=this, items=new Array(); items.push( { xtype : "button", iconCls : CommonConstant.BACK_BUTTON_CLS, handler : function() { //取得当然工具栏内容 var obj=toolBarItems.pop(); if (obj.listName=="blogTabletListView") { //取得上一级工具栏内容 var preObj=toolBarItems.pop(); //通过上一级工具栏内容创建工具栏 CommonUtil.createTopTabView(preObj.title,preObj.items); //把上一级工具栏内容重新压入栈中 toolBarItems.push(preObj); //返回上一级页面 me.getBlogTabletView().setActiveItem(0); }else{ me.backUserInfoTablet(); } } }, { xtype: 'spacer' } ); CommonUtil.createTopTabView("填写评论",items); //把当前工具栏内容压入栈中 toolBarItems.push({ items:items, listName:listName, title:"填写评论" }); me.getBlogTabletView().setActiveItem("blogTabletCommentFormView"); me.getBlogTabletCommentFormView().reset(); }
以上代码toolBarItems是一个本模块中的全局数组,负责保存工具栏内容,如果从评论页再跳转到其它页,那么评论页的工具栏内容就已经保存在toolBarItems中了,toolBarItems.push(preObj);这句代码把上级页面的工具栏内容重新压入栈中,如果不写这行代码,那么当前页就执行了两次pop()出栈操作,导致在上级页面执行var obj=toolBarItems.pop();这段代码时取的不是当前页的工具栏内容,而是上一级的内容。