Sencha Touch页面跳转创建返回上一级按钮的设计思路

这段时间开发了一个微博模块，其中涉及到各种页面跳转，例如A页面跳到B页面，B页面又跳到C页面，同时A页面也可以跳到C页面，那么在C页面返回上一级的时候就需要判断是哪个页面跳转进来的，甚至会发生A页面跳到B页面，B页面还能跳到A页面的这种循环跳转，有人会说为什么不用navigationview，navigationview只提供简单的返回上一级功能，如果在返回上一级的操作中还需要判断各种参数的值，或者执行一些查询，或者页面跳转的层次很深，那么navigationview就不那么好用了。刚开始我都是手写的跳转，简单的跳转还行，如果页面跳转复杂的话简直生不如死，那么该如何解决这种情况呢？假设页面是直线跳转，不存在循环跳转，也就是A页面跳到B页面，B页面又跳到C页面，C页面又跳到D页面，并且在跳转页面时创建返回上一级按钮，如下图：

　　上图一共有四个页面，三个按钮，在点击按钮的时候返回上一级页面并且创建上一级页面的返回按钮，如果是单纯的返回页面，那么完全可以在代码中重新创建一个返回按钮就可以了，但是往往每个返回按钮都担负这很多任务要完成，例如以下是我的微博中的一段代码，作用是跳转到评论页并创建评论页的工具栏：

 

Js代码  

1. toCommentTablet:function(id,listName){  
2.         var me=this,  
3.             items=new Array();  
4.         items.push(  
5.             {  
6.                 xtype : "button",  
7.                 iconCls : CommonConstant.BACK_BUTTON_CLS,  
8.                 handler : function() {  
9.                     if (listName=="blogTabletListView") {  
10.                                                 //创建上一级工具栏  
11.                         me.createTabletListToolbar();  
12.                                                 //返回上级页面  
13.                         me.getBlogTabletView().setActiveItem(0);  
14.                     }else{  
15.                         me.backUserInfoTablet();  
16.                     }  
17.                 }  
18.             },  
19.             {  
20.                 xtype: 'spacer'  
21.             }  
22.         );  
23.         CommonUtil.createTopTabView("填写评论",items);//创建工具栏的方法  
24.         me.getBlogTabletView().setActiveItem("blogTabletCommentFormView");  
25.         me.getBlogTabletCommentFormView().reset();  
26.     }  

 　　其中items中的第一个元素就是返回按钮，handler是它的执行方法，里面用到了变量 listName来判断返回哪个页面，那么问题来了，如果我在评论页面再跳转到其他页面的话，那么从其他页面再返回评论页的时候，这个按钮该怎么创建？因为里面的listName是当时有效的，在其他地方是取不到的，所以这个时候只能在进入评论页的时候把listName保存下来，等到用的时候再取，那既然可以保存listName，是不是也可以把整个工具栏中的内容都保存下来呢？答案是肯定的。那么该怎么保存呢？如果跳转一次页面需要保存一次工具栏内容的话，那么跳转10次就要保存10次，显然不能用10个变量来保存，我们知道java有种数据结构叫“堆栈”，这种情况完全可以用堆栈来解决。我们把上面的修改一下，改后的代码如下：

Js代码  

1. toCommentTablet:function(id,listName){  
2.     var me=this,  
3.         items=new Array();  
4.     items.push(  
5.         {  
6.             xtype : "button",  
7.             iconCls : CommonConstant.BACK_BUTTON_CLS,  
8.             handler : function() {  
9.                 //取得当然工具栏内容  
10.                 var obj=toolBarItems.pop();  
11.                 if (obj.listName=="blogTabletListView") {  
12.                     //取得上一级工具栏内容  
13.                     var preObj=toolBarItems.pop();  
14.                     //通过上一级工具栏内容创建工具栏  
15.                     CommonUtil.createTopTabView(preObj.title,preObj.items);  
16.                     //把上一级工具栏内容重新压入栈中  
17.                     toolBarItems.push(preObj);  
18.                     //返回上一级页面  
19.                     me.getBlogTabletView().setActiveItem(0);  
20.                 }else{  
21.                     me.backUserInfoTablet();  
22.                 }  
23.             }  
24.         },  
25.         {  
26.             xtype: 'spacer'  
27.         }  
28.     );  
29.     CommonUtil.createTopTabView("填写评论",items);  
30.     //把当前工具栏内容压入栈中  
31.     toolBarItems.push({  
32.         items:items,  
33.         listName:listName,  
34.         title:"填写评论"  
35.     });  
36.   
37.     me.getBlogTabletView().setActiveItem("blogTabletCommentFormView");  
38.     me.getBlogTabletCommentFormView().reset();  
39. }  

 　　以上代码toolBarItems是一个本模块中的全局数组，负责保存工具栏内容，如果从评论页再跳转到其它页，那么评论页的工具栏内容就已经保存在toolBarItems中了，toolBarItems.push(preObj);这句代码把上级页面的工具栏内容重新压入栈中，如果不写这行代码，那么当前页就执行了两次pop()出栈操作，导致在上级页面执行var obj=toolBarItems.pop();这段代码时取的不是当前页的工具栏内容，而是上一级的内容。