【SENCHA TOUCH】页面动画跳转切换

跳转方式1：

控制层：

 bt_kycgFun : function() {this.setCard('myKycg','app.view.mphome.Kycg');},bt_zhxxFun : function() {var nextCard = Ext.getCmp('homeview')var card = null;if (typeof(nextCard) == 'undefined') {card = Ext.create('app.view.mphome.Zhxx');card.down('button[action=back]').on("tap", this.backSettings, this);} else {card = nextCard;}Ext.Viewport.animateActiveItem(card, {type : 'slide',direction : 'left'});},// 返回设置backSettings : function() {Ext.Viewport.animateActiveItem(this.getMyMainCard(), {type : 'slide',direction : 'right'});},//跳转页面id：下个页面Card的id，createCard要创建页面的地址setCard : function(id,createCard) {var nextCard = Ext.getCmp(id)var card = null;if (typeof(nextCard) == 'undefined') {card = Ext.create(createCard);card.down('button[action=back]').on("tap", this.backSettings, this);} else {card = nextCard;}Ext.Viewport.animateActiveItem(card, {type : 'slide',direction : 'left'});}

下级目录必须有个返回的按钮，然后在要跳转的时候已经给返回的按钮写了返回的时间。返回事件直接掉了这里的页面直接进来。第二次进去怕重新创建，判断了下有没有创建，没有创建的话就不创建直接通过id直接进去。不知道还有什么更好的办法。请大家留言。

跳转方式2：

Ext.define('app.view.mphome.Zhxx', {extend: 'Ext.navigation.View',xtype : "homeview",requires: ['app.store.ModuleTypes'],config: {id : 'homeview',defaultBackButtonText :'返回',navigationBar:{id:'homeBar',items : [{id: 'btnLogout',xtype: 'button',text: '返回',ui : 'back',align: 'left',action : 'back'}]},items: [{id:"showlist",title : Global.title,items :[{id : 'moduletypelist',xtype: 'list',docked: 'top',scrollable: 'vertical',flex: 1,width:'100%',height:'100%',store: 'ModuleTypes',onItemDisclosure:true,itemTpl: ['<div><b>{mkmc}</b></div>'].join('')}]}]}
});

这里使用了navigation跳转，他会自动生成返回跳转。

跳转3不带动画：

这个本来做的是下面有标签页的：

 bt_qtkf2Fun : function() {var dzcg_qtkf = Ext.create('app.view.mphome.ktkf.Qtkf_dzcg');dzcg_qtkf.down('button[action=back]').on("tap",this.backSettings, this);// 隐藏主页的返回Ext.getCmp("mp_toolbar").hide();Ext.getCmp("myKtkf_state").setValue("1");//改变card中第一个panel的状态this.getMyKtkfCard().add(dzcg_qtkf);this.getMyKtkfCard().setActiveItem(dzcg_qtkf);},// 返回设置backSettings : function() {var card = this.getMyKtkfCard().getActiveItem();this.getMyKtkfCard().setActiveItem(0);// 删除this.getMyKtkfCard().removeAt(1);// 显示返回主页的返回按钮Ext.getCmp("mp_toolbar").show();Ext.getCmp("myKtkf_state").setValue("0");//改变card中第一个panel的状态card.destroy();}

【SENCHA TOUCH】页面动画跳转切换相关推荐

Sencha Touch 笔记
Sencha Touch 的动画方式 HIERARCHY Ext.Base Ext.fx.Animation REQUIRES Ext.fx.animation.Fade Ext.fx.animati ...
Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)...
常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样 ...
uniapp跳转页面动画
今天修改了一个app内点击跳转画面过于生硬的问题场景:点击切换后画面会先白一下再跳转首先用的是uni.reLaunch()方法跳转的 methods: {asdsa(event) {uni.reL ...
js利用tab键切换当前页面_JavaScript跳转到指定页面并且到指定的tab切换窗口
JavaScript跳转到指定页面并且到指定的tab切换窗口案例的解析就是点击A页面的第一个的切换窗口的按钮跳转到B页面,再点击B页面的按钮跳转到A页面的第二个窗口,这个实现的效果有三种方法,下面的 ...
sencha touch 在安卓中横屏、竖屏切换应用崩溃问题
答案来至于 Sencha Touch 交流 @周旭这是由于横竖屏转换导致activity重跑onCreate方法导致的,有两种解决方案: 1.横竖屏转换的时候不要重新跑onCreate方法,这个可以 ...
sencha touch 类的使用
sencha touch 有一套自己的类机制,可以以面向对象的方式去写代码,封装业务逻辑,sencha touch 的组件.插件.api等都建立在这一套类机制的上面在实际开发中,我们需要遵循这一套机 ...
Sencha Touch（Extjs）
Sencha官方学习文档:http://docs.sencha.com/touch/2.3.1/ Sencha2.3正式版下载:http://www.sencha.com/products/touch ...
[Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容...
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...
jsp页面div上下滑动_H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 实现原理假 ...
从零开始学习Sencha Touch MVC应用之十四
我们已经给search-panel设置了cls属性:"一个可以添加到这个组件元素中的供选择的附加CSS类(默认为""),主要可用于对组件的定制风格或者其组件元素的CSS规 ...

【SENCHA TOUCH】页面动画跳转切换

【SENCHA TOUCH】页面动画跳转切换相关推荐

最新文章

热门文章