【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();
			}