最近在review一个项目的代码,

发现返回操作比较乱,很多"从哪里来,到哪里去的操作"被写的一塌糊涂;

按照ios系统的进场出场动画(人家的体验还是很好的,必须借鉴)为标准,使用sencha模拟一套动画,

来看看以下是两个函数,作为重载:

/**
* 重载跳转方法
*/
gotoFn=function(){
console.log("进入gotoFn函数.......arguments:")
console.log(arguments);
console.log("arguments.length===="+arguments.length)
// if(arguments.length>1){
// throw new Error("undefined function....")
// return false;
// } //@activeItem获取当前活动的Item,@requestItem目标Item,@direction动画方向
//根据参数的个数来判定是指定Item跳转,还是单一的"返回"操作,
//如果传入参数,arguments表示参数Array;没有传入参数arguments表示当前事件中的对象Array,所以判断条件,为1,2所示
var activeItem=Ext.Viewport.getActiveItem(),
requestItem =arguments.length==1?arguments[0]:(Ext.Viewport.getInnerItems().length - 2),//
directionStr=arguments.length==1?"left":"right";//
Ext.Viewport.animateActiveItem(requestItem, {type: "slide", direction: directionStr, listeners: {
animationend: function () {
Ext.Viewport.remove(activeItem, true);
}
}})
}

大致逻辑:

当点击返回按钮时,获取当前活动的Item,然后计算上一个Item的id,最后将上一个Item动画载入的同时,监听动画完毕事件(animationed),将当前活动的Item移除.

值得一说的是(其实是我偶然发现的....哈哈).如果"返回操作"单一的将当前的活动Item移除的话,Sencha会默认出一个转场动画.如下代码:

Ext.Viewport.remove(Ext.Viewport.getActiveItem(),true)

这里默认动画的方向为用户指定过的方向(上一个动画如果向左,这个动画就向左...............)

sencha touch2 动画问题的更多相关文章

  1. 【翻译】Sencha Touch2.4 The Layout System 布局

    [翻译]The Layout System 布局 In Sencha Touch there are two basic building blocks: componentsand containe ...

  2. Sencha Touch2 工作笔记

    Sencha Touch2 工作笔记 Ext.dataview.List activate( this, newActiveItem, oldActiveItem, eOpts ) Fires whe ...

  3. Sencha Touch2 -- 11.1:定义具有关联关系的模型

    在Sencha Touch2.0中,可以定义不同模型之间的关联关系.例如,在开发博客网站的时候,可以首先定义用户(User)模型,然后为用户定义文章(Article)模型.一个用户可以发表多篇文章,因 ...

  4. Sencha Touch2 时间轴ListPanel

    直接贴代码 timeline.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  5. Cordova3+sencha touch2.x 环境搭建

    1.安装 nodejs 2.安装 cordova: npm install -g cordova 3.创建一个工程: cordova create MyApp com.example.MyApp My ...

  6. [转]使用Sencha Ext JS 6打造通用应用程序

    原文地址:http://www.uedsc.com/using-sencha-ext-js-6-to-build-universal-apps.html 在Sencha和整个Ext JS团队的支持下, ...

  7. Sencha Cmd是什么

    Sencha Cmd的简介 ~~~~~~~~~~~~~~~~~~~~~~~ Sencha cmd 是一个跨平台的命令行工具,它从你应用程序的新创建到部署入产品中的整个生命周期都提供了许多自动化的执行任 ...

  8. html5外包—长年承接html5外包业务:《Sencha Touch权威指南》下载

    <Sencha Touch权威指南>内容简介:如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?<Sencha Touch权威指南&g ...

  9. JavaScript开发之路01(初识Sencha Touch框架)

    一.SenchaTouch的hello world实例: Ext.application({ name:'myapp', icon:'images/icon.png', glossOnIcon:fal ...

随机推荐

  1. 解决Win7系统安装时“安装程序无法定位现有 系统分区,也无法创建新的系统分区”提示

    第一步:U盘启动装系统时,格式化主分区的内容后出现上面的问题 第二步:重启机器,通过U 盘启动.进入win pe系统. 第三步:把windows 7的ISO镜像解压到电脑的非系统盘的其他硬盘上.如D: ...

  2. 关于对db_block_gets的理解与实验

    实验 一. 自己手动创建的小表 创建一个区大小为  40k  SYS@ORCL>show parameter db_block_size NAME                         ...

  3. Linux内核树的建立-基于ubuntu系统

    刚看 O'REILLY 写的<LINUX 设备驱动程序>时.作者一再强调在编写驱动程序时必须 建立内核树.先前的内核只需要有一套内核头文件就够了,但因为2.6的内核模块吆喝内核源码树中的目 ...

  4. EXTJS 4.2 资料 控件之combo 联动

    写两个数据源: 1.IM_ST_Module.js { success:true, data:[ { ModuleId: '1', ModuleName: '资讯' } , { ModuleId: ' ...

  5. Increase SharePoint Execution Timeout

    <system.web> <compilation batch="false" batchTimeout="600" maxBatchSize ...

  6. 滚珠菜单动效-b

    原型从网上找的,动效使用了CAAnimation和UIDynamic物理引擎.  gitHub  :https://github.com/BearRan/FlowMenuAnimation 大致步骤如 ...

  7. js数组反转

    var _li = test.getElementsByTagName("li"), arrayObj = [].slice.apply(_li),//_li用apply调用sli ...

  8. 利用手上的UI资源(附免费UI工具包)

    http://www.uisdc.com/how-to-use-ui-kits# 大家都知道,UI工具包里有很多好看的资源:比如按钮.滑块.面包屑.播放器.表单,甚至是一个"赞!" ...

  9. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  10. RCC 2014 Warmup (Div. 2) ABC

    题目链接 A. Elimination time limit per test:1 secondmemory limit per test:256 megabytesinput:standard in ...