Afficher/masquer une barre d'outils avec l'animation de diapositives dans le Sencha Touch

J'ai une barre d'outils ancrée en haut de la vue principale, et un panneau de mise en carte ci-dessous. L'idée est d'avoir la barre d'outils, faites glisser vers le bas à partir du haut sur le toucher d'un bouton, et remettez-le en place lorsque fermée. Il ne faut pas superposer le contenu ci-dessous, tout en dessous, il doit glisser vers le bas aussi bien pour faire de la place pour la barre d'outils.

Tout d'abord, comment puis-je animer la barre d'outils afficher/masquer avec une transition de diapo? C'est de cette façon que je suis en train de montrer/cacher la barre d'outils du moment:

toggleMenu:function(){
    if (tkwine.views.menu.hidden){
        tkwine.views.menu.show();
    }else{
        tkwine.views.menu.hide();
    }

    //force the viewport to lay itself out again after toolbar hide/show 
    tkwine.viewport.doComponentLayout();
}

Deuxièmement, cela semble bien fonctionner une fois, mais après affichage et masquage de la barre d'outils une fois, la deuxième fois j'ai tenté de le montrer, la barre d'outils des superpositions le contenu ci-dessous au lieu de le pousser vers le bas. Pourquoi en serait-il?

C'est ma fenêtre si elle peut aider à résoudre le deuxième problème:

tkwine.views.Viewport = Ext.extend(Ext.Panel, {
    id: 'viewport',
    layout: 'card',
    cardSwitchAnimation: 'slide',
    fullscreen: true,

    initComponent: function() {

        //put instances of cards into app.views namespace
        Ext.apply(tkwine.views, {
            menu: new tkwine.views.Menu(),
            home: new tkwine.views.Home(),
            trailsList: new tkwine.views.TrailsList(),
            trailDetail: new tkwine.views.TrailDetail(),
            createTrail: new tkwine.views.CreateTrail()
        });

        Ext.apply(tkwine.controllers, {
            historyManager: new tkwine.controllers.HistoryManager(tkwine.views.home)
        });

        Ext.apply(this, {
            dockedItems: [tkwine.views.menu],
            items: [
                tkwine.views.home,
                tkwine.views.trailsList,
                tkwine.views.trailDetail,
                tkwine.views.createTrail,
            ],
        });

        tkwine.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

et ma barre d'outils:

tkwine.views.Menu = Ext.extend(Ext.Toolbar, {
    hidden: true,
    overlay: false,
    layout: {
        pack: 'center',
    },

    defaults:{
        ui: 'plain',
        iconMask: true,
    },

    initComponent: function() {
        Ext.apply(this, {
            items:[
                {
                    iconCls: 'toolBarIconExplore',
                    handler:function(button, event){
                        Ext.dispatch({
                          controller: tkwine.controllers.controller,
                          action: 'showWineTrails',
                        });
                    }
                },
                {
                    xtype: 'spacer',
                },
                {
                    iconCls: 'toolBarIconCreate',
                    handler:function(button, event){
                        Ext.dispatch({
                          controller: tkwine.controllers.controller,
                          action: 'showCreateTrail',
                        });
                    }
                },
                {
                    xtype: 'spacer',
                },
                {
                    iconCls: 'toolBarIconItineraries',
                    handler:function(button, event){
                    }
                },
                {
                    xtype: 'spacer',
                },
                {
                    iconCls: 'toolBarIconCellar',
                    handler:function(button, event){
                    }
                },
                {
                    xtype: 'spacer',
                },
                {
                    iconCls: 'toolBarIconAction',
                    handler:function(button, event){
                    }
                }
            ],
        });

        tkwine.views.Menu.superclass.initComponent.apply(this, arguments);
    },

});

Ext.reg('menu', tkwine.views.Menu);

OriginalL'auteur Angela | 2011-07-08