zoukankan      html  css  js  c++  java
  • 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!
  • 相关阅读:
    luogu 1593
    luogu 1369
    hdu 1796
    bzoj 3398
    luogu 4587
    luogu 2152
    bzoj 3629
    bzoj 1507: [NOI2003]Editor
    bzoj 1503: [NOI2004]郁闷的出纳员
    bzoj 1497: [NOI2006]最大获利
  • 原文地址:https://www.cnblogs.com/Brose/p/st_panel_card.html
Copyright © 2011-2022 走看看