Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)

常规的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!