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!