Показать / скрыть панель инструментов с анимацией слайдов в 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). скрытый параметр конфигурации, а не публичное свойство, поэтому вы не можете получить к нему доступ напрямую. Вам нужно использовать геттер:

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