显示/隐藏在煎茶触摸幻灯片动画工具栏 [英] Show/hide a toolbar with slide animation in Sencha Touch
问题描述
我有停放在主视口的顶端工具栏，并用下面卡布局的面板。这个想法是有工具栏从顶部在触摸一个按钮滑下，并驳回当滑回了。它不应该覆盖它下面的内容，一切都在它下面应该滑下以及腾出空间为工具栏。
首先，我怎么能与动画的幻灯片过渡工具栏上显示/隐藏？这是怎么了显示/此刻隐藏工具栏：
toggleMenu：功能（）{
如果（tkwine.views.menu.hidden）{
tkwine.views.menu.show（）;
}其他{
tkwine.views.menu.hide（）;
} //强制视口本身工具栏后，隐藏/显示再次布局
tkwine.viewport.doComponentLayout（）;
}
其次，这似乎做工精细一次，但显示和隐藏工具栏一次，第二次我试图表现出来之后，工具栏覆盖下面的内容，而不是推下来的。为什么会这样呢？
这是我的视口，如果它可以帮助调试第二个问题：
tkwine.views.Viewport = Ext.extend（Ext.Panel的，{
ID：'视口'，
布局：'卡'，
cardSwitchAnimation：'滑'，
全屏：真实， initComponent：功能（）{ //把卡实例为app.views命名空间
Ext.apply（tkwine.views，{
菜单：新tkwine.views.Menu（）
家居：新tkwine.views.Home（）
trailsList：新tkwine.views.TrailsList（）
trailDetail：新tkwine.views.TrailDetail（）
createTrail：新tkwine.views.CreateTrail（）
}）; Ext.apply（tkwine.controllers，{
historyManager：新tkwine.controllers.HistoryManager（tkwine.views.home）
}）; Ext.apply（这一点，{
dockedItems：[tkwine.views.menu]
项目：
tkwine.views.home，
tkwine.views.trailsList，
tkwine.views.trailDetail，
tkwine.views.createTrail，
]
}）; tkwine.views.Viewport.superclass.initComponent.apply（这一点，参数）;
}
}）;
和我的工具栏：
tkwine.views.Menu = Ext.extend（Ext.Toolbar，{
隐藏：真实，
覆盖：假的，
布局：{
包：中心，
}， 默认值：{
用户界面：普通，
iconMask：真实，
}， initComponent：功能（）{
Ext.apply（这一点，{
项目：
{
iconCls：toolBarIconExplore'，
处理：功能（按键，事件）{
Ext.dispatch（{
控制器：tkwine.controllers.controller，
动作：showWineTrails'，
}）;
}
}，
{
的xtype：'隔离'，
}，
{
iconCls：toolBarIconCreate'，
处理：功能（按键，事件）{
Ext.dispatch（{
控制器：tkwine.controllers.controller，
动作：showCreateTrail'，
}）;
}
}，
{
的xtype：'隔离'，
}，
{
iconCls：toolBarIconItineraries'，
处理：功能（按键，事件）{
}
}，
{
的xtype：'隔离'，
}，
{
iconCls：toolBarIconCellar'，
处理：功能（按键，事件）{
}
}，
{
的xtype：'隔离'，
}，
{
iconCls：toolBarIconAction'，
处理：功能（按键，事件）{
}
}
]
}）; tkwine.views.Menu.superclass.initComponent.apply（这一点，参数）;
}，}）;Ext.reg（'菜单'，tkwine.views.Menu）;
尝试添加听众你的菜单（警告，未测试）：
显示：功能（）{
Ext.Anim.run（这一点，滑动，{
方向：向下
}）;
}，
隐藏：功能（）{
Ext.Anim.run（这一点，滑动，{
方向：向上
}）;
}
您第二个问题是因为你的条件，如果（tkwine.views.menu.hidden）的。
隐藏的是一个配置选项，而不是公共财产，所以你不能直接访问它。
您需要使用的getter：
如果（tkwine.views.menu.isHidden（））
I have a toolbar docked to the top of the main viewport, and a panel with card layout below. The idea is to have the toolbar slide down from the top upon touching a button, and slide back up when dismissed. It should not overlay the content below it, everything below it should slide down as well to make room for the toolbar.
Firstly, how can I animate the toolbar show/hide with a slide transition? This is how I am showing/hiding the toolbar at the 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();
}
Secondly, this seems to work fine once, but after showing and hiding the toolbar once, the second time I attempt to show it, the toolbar overlays the content below instead of pushing it down. Why would this be?
This is my viewport if it might help debug the second issue:
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);
}
});
and my toolbar:
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);
Try adding listeners to your menu (warning, not tested):
show: function() {
Ext.Anim.run(this, "slide", {
direction: "down"
});
},
hide: function() {
Ext.Anim.run(this, "slide", {
direction: "up"
});
}
Your second problem is because of your conditional if (tkwine.views.menu.hidden). hidden is a config option, not a public property, so you can't access it directly. You need to use the getter:
if (tkwine.views.menu.isHidden())
这篇关于显示/隐藏在煎茶触摸幻灯片动画工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
