sencha touch2 动画问题
最近在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 动画问题的更多相关文章
- 【翻译】Sencha Touch2.4 The Layout System 布局
[翻译]The Layout System 布局 In Sencha Touch there are two basic building blocks: componentsand containe ...
- Sencha Touch2 工作笔记
Sencha Touch2 工作笔记 Ext.dataview.List activate( this, newActiveItem, oldActiveItem, eOpts ) Fires whe ...
- Sencha Touch2 -- 11.1:定义具有关联关系的模型
在Sencha Touch2.0中,可以定义不同模型之间的关联关系.例如,在开发博客网站的时候,可以首先定义用户(User)模型,然后为用户定义文章(Article)模型.一个用户可以发表多篇文章,因 ...
- Sencha Touch2 时间轴ListPanel
直接贴代码 timeline.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- Cordova3+sencha touch2.x 环境搭建
1.安装 nodejs 2.安装 cordova: npm install -g cordova 3.创建一个工程: cordova create MyApp com.example.MyApp My ...
- [转]使用Sencha Ext JS 6打造通用应用程序
原文地址:http://www.uedsc.com/using-sencha-ext-js-6-to-build-universal-apps.html 在Sencha和整个Ext JS团队的支持下, ...
- Sencha Cmd是什么
Sencha Cmd的简介 ~~~~~~~~~~~~~~~~~~~~~~~ Sencha cmd 是一个跨平台的命令行工具,它从你应用程序的新创建到部署入产品中的整个生命周期都提供了许多自动化的执行任 ...
- html5外包—长年承接html5外包业务:《Sencha Touch权威指南》下载
<Sencha Touch权威指南>内容简介:如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?<Sencha Touch权威指南&g ...
- JavaScript开发之路01(初识Sencha Touch框架)
一.SenchaTouch的hello world实例: Ext.application({ name:'myapp', icon:'images/icon.png', glossOnIcon:fal ...
随机推荐
- Jquery实现图片左右自动滚动
图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML> <html> ...
- 2015年1月最新中国行政区划县及以上代码mysql数据库
中华人民共和国国家统计局>> 行政区划代码>>mysql数据格式 截图如下 行政区划mysql数据库文件下载:nation.zip 转载:http://www.sdhack.c ...
- setcookie,getcookie,delcookie,setpostBgPic
function setCookie(name,value) { var Days = 365; //此 cookie 将被保存 30 天 var exp = new Date(); //new Da ...
- vb6-很简单的配置密码验证提示
'很简单的配置密码验证提示 Dim add As String add = Trim(InputBox("请输入配置密码", "报表配置")) If add = ...
- Ping的过程详解
先看拓朴图: 我在这里讲拼的两情况,一种是同一网段内,一种是跨网段的ping …. 首先,如果主机A,要去拼主机B,那么主机A,就要封装二层报文,他会先查自己的MAC地址表,如果没有B的MAC地址,就 ...
- linux 加载驱动后有permanent的解决办法
参考http://blog.csdn.net/zmnqazqaz/article/details/38058713解决 原因是系统默认内核使用gcc与当前编译模块gcc版本不同导致的. 查看内核默认使 ...
- [Learn Android Studio 汉化教程]第四章 : Refactoring Code
[Learn Android Studio 汉化教程]第四章 : Refactoring Code 第四章 Refactoring Code 重构代码 在Android Studio中开发,解决 ...
- Ubuntu下Sublime Text 3无法输入中文的解决方案
1. 保存下面的代码到文件sublime_imfix.c中: /* * sublime-imfix.c * Use LD_PRELOAD to interpose some function to f ...
- mybatis从dao传入多个参数到sqlmap时dao中要使用map或实例对象(如:user)作为参数传入, 否则报错找不到属性getter方法
23:37 2015-07-02 注意1. 使用mybaits的resultMap查询时, 如果想传入多个参数(比如where 1=1动态多条件查询时)sqlmap文件中对应的方法中, selectL ...
- Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
最近在做项目时用到了定时执行的js方法,setInterval与setTimeout时间长了不用有些生疏了,所以自己总结了一下,记下来,以便以后使用. Document自带的方法: 循环执行:var ...