在Sencha Touch中显示/隐藏带有幻灯片动画的工具栏

Question

我有一个停靠在主视口顶部的工具栏,以及一个带有卡片布局的面板.我们的想法是在触摸按钮时让工具栏从顶部向下滑动,并在关闭时向上滑动.它不应该覆盖它下面的内容,它下面的所有内容也应该向下滑动以便为工具栏腾出空间.

首先,如何使用幻灯片过渡来显示/隐藏工具栏的动画？这就是我此刻显示/隐藏工具栏的方式:

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();
}

其次,这似乎工作得很好,但在显示和隐藏工具栏一次后,第二次尝试显示它时,工具栏覆盖下面的内容而不是将其向下推.为什么会这样？

这是我的视口,如果它可能有助于调试第二个问题:

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);
    }
});

和我的工具栏:

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);

Answer 1

尝试将监听器添加到菜单中(警告,未经测试):

show: function() {
    Ext.Anim.run(this, "slide", {
        direction: "down"
    });
},
hide: function() {
    Ext.Anim.run(this, "slide", {
        direction: "up"
    });
}

你的第二个问题是你的条件if(tkwine.views.menu.hidden).hidden是配置选项,而不是公共属性,因此您无法直接访问它.你需要使用getter:

if (tkwine.views.menu.isHidden())

Answer 2

tkwine.views.menu.show({type: 'slide', direction: 'up'});
tkwine.views.menu.hide({type: 'slide', direction: 'down'});