`
美丽心情19801230
  • 浏览: 5477 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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();这段代码时取的不是当前页的工具栏内容,而是上一级的内容。

 

 

 

 

 

 

 

  • 大小: 70.5 KB
分享到:
评论

相关推荐

    sencha touch 登陆界面

    Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。"sencha touch 登陆界面"这个主题,主要涉及的是如何使用Sencha Touch来设计和实现一...

    Sencha 和 Sencha Touch 简介

    Sencha Touch 是第一个专门设计为移动设备开发 web 应用的 JavaScript 框架,它基于 HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web ...

    touch-docs-2.2.1.zip(senchaTouch 离线API参考文档)

    1. **响应式设计**:Sencha Touch 提供了适应各种屏幕尺寸和设备的布局系统,确保应用在手机、平板和桌面设备上都能呈现良好的用户体验。 2. **丰富的UI组件**:包括列表(Lists)、表格(Grids)、按钮(Buttons)、面板...

    Sencha Touch in Action

    Sencha Touch是一个利用HTML5、CSS3和JavaScript创建移动Web应用程序的框架,它是Sencha框架的一部分,专门针对触摸设备设计。本书的作者包括Jesus Garcia、Anthony DeMoss和Mitchell Simoens,他们都是在移动应用...

    sencha touch项目源码

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件和API,用于构建交互式的、响应式的Web应用程序。这个项目源码是基于Sencha Touch开发的一个实例,通过研究这个项目,我们可以深入理解Sencha ...

    sencha touch list demo

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库,用于构建高性能的触屏Web应用。在“sencha touch list demo”中,我们主要关注的是Sencha Touch中的列表(List)组件,这是一个核心且常用的...

    一个完整的sencha touch 应用案例

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。这个压缩包文件包含了创建一个完整的Sencha Touch 应用所需的基本元素,让我们逐一解析这些...

    sencha touch在VScode上的插件

    Sencha Touch 是一款用于构建移动应用的前端框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者可以创建交互性强、性能优异的触屏应用程序。VSCode(Visual Studio Code)是微软开发的一款广受欢迎的源...

    sencha touch中文翻译文档

    Sencha Touch是一款强大的JavaScript框架,专门用于构建移动Web应用程序。它提供了一套完整的UI组件和交互功能,使得开发者能够创建出具有原生应用体验的触摸友好型应用。这个"Sencha Touch中文翻译文档"是针对...

    sencha touch 2.4.0最新版

    Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架,它使得开发者能够构建功能丰富的、响应式的Web应用程序,这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...

    Sencha Touch2环境搭建

    2. **创建新项目** - 使用Sencha CMD创建一个新的Sencha Touch 2项目。在命令行中导航到Sencha CMD安装目录下的bin文件夹,然后运行: ``` sencha generate app AppName /path/to/your/project/folder ``` 将...

    Sencha Touch开发的项目《般若人生》源码

    《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的JavaScript框架,专门用于构建跨平台的触屏友好型Web应用程序。它提供了丰富的UI组件和强大的数据管理工具,使得开发者能够...

    senchaTouch和fusioncharts结合的实例

    Sencha Touch 和 FusionCharts 的结合使用,是一种在移动设备上创建交互式图表和图形的高效方式。Sencha Touch 是一个流行的JavaScript框架,专门用于构建触摸优化的移动Web应用程序,而FusionCharts则是一款强大的...

    sencha touch 实例

    Sencha Touch 是一款专为移动设备设计的前端框架,它利用 HTML5 和 CSS3 的特性,为开发者提供了创建原生般交互体验的Web应用程序的能力。本文主要探讨了使用 Sencha Touch 开发移动应用的一些关键点。 1. **Sencha...

    api.zip_sencha _sencha touch api_sencha touch2 api

    Sencha Touch 是一款用于构建移动Web应用程序的JavaScript框架,它为开发者提供了丰富的组件和功能,以便在各种设备上创建响应式、高性能的应用程序。标题中的"api.zip_sencha _sencha touch api_sencha touch2 api...

    Sencha Touch MVC 模式

    ### FrancisShanahan-SenchaTouch2MVCHelloworld-c330be1项目 该项目是一个基于Sencha Touch 2的MVC模式Hello World示例,可能包含了创建基本模型、视图、控制器的过程,演示了如何通过MVC模式构建一个简单的应用。...

    sencha touch sdk工具

    Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得开发者可以创建与原生应用相媲美的交互体验。SDK工具则进一步扩展了这个框架的功能,为开发、调试和打包应用提供了便利。 首先,我们来详细...

    sencha touch

    Sencha Touch 是一个基于 JavaScript 的开源框架,专为构建跨平台移动应用程序而设计。它支持多种移动设备,包括 iOS 和 Android,并且能够充分利用 HTML5 的强大功能来创建高性能的应用程序。 在给定的内容中提到...

Global site tag (gtag.js) - Google Analytics