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

轉載于:https://www.cnblogs.com/Brose/p/st_panel_card.html

總結

以上是生活随笔為你收集整理的Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。