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!