常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样就会如果要实现"view"之间的跳转,animateActiveItem()方法将被使用,

但是通过st的源码

animateActiveItem: function(activeItem, animation) {        var layout = this.getLayout(),            defaultAnimation;        if (this.activeItemAnimation) {            this.activeItemAnimation.destroy();        }        this.activeItemAnimation = animation = new Ext.fx.layout.Card(animation);        if (animation && layout.isCard) {            animation.setLayout(layout);            defaultAnimation = layout.getAnimation();            if (defaultAnimation) {                defaultAnimation.disable();            }            animation.on('animationend', function() {                if (defaultAnimation) {                    defaultAnimation.enable();                }                animation.destroy();            }, this);        }        return this.setActiveItem(activeItem);    }

 

我们可以轻易的发现这个方法仅限于在Card布局中适用,

那么我们常常要是想做一个单一的panel时,来使用动画跳转.我们的应用要是不使用这样的容器来实现怎么办呢?

 

这里我们就需要使用一个整体的Panel(Main.js)来组织其他的Panel :

var panel = Ext.create('Ext.Panel', {    layout: 'card',    items: [        {            html: "Your Firse Panel xtype name"        },        {            html: "Your Second Panel xtype name"        },        {            html: "Your Third Panel xtype name"        }    ]});panel.setActiveItem(0);

这样首先加载的将是"

Your Firse Panel xtype" 如果需要跳转这里需要注意的是.要使用该View设置其的setActiveItem("xtype name") 或者 animateActiveItem("xtype name"); over!