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

Answer 3

下面的代码适用于类似的东西。但是，我不仅仅是这个，所以我没有测试滑动本身。此方法不需要执行doComponentLayout，因为它可以优雅地滑动视口中的所有内容。如果它不起作用，请不要忽略它，但要对它进行处理，因为它完全符合我的要求。

tkwine.views.menu.show(Ext.Anim({
    easing: 'easeInOut',
    duration: 3000,
    autoClear: false,
    from: {
        opacity: 0,
        height: '0px'
    },
    to: {
        opacity: 1,
        height: tkwine.views.menu.getHeight() + 'px'
    }
}));

tkwine.views.menu.hide(Ext.Anim({
    easing: 'easeInOut',
    duration: 3000,
    autoClear: false,
    from: {
        opacity: 1,
        height: tkwine.views.menu.getHeight() + 'px'
    },
    to: {
        opacity: 0,
        height: '0px'
    }
}));

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

3 个答案: