Sencha触觉滑过菜单
提问于 2014-05-19 14:40:04
使用Sencha：
我想要创建一个滑出菜单。但不像facebook这样的类型：
相反，我想要做的是在顶部(标题下的容器上方)和菜单下面滑出，这样它就会跳过它，而不是把它推到右边：
我已经搜查过，也没有发现任何样本。有人能推荐一个网站或教程来做这个吗？
更新- 5/24/2014感谢所有不同的建议。唯一的事情是，我不希望它看起来像FB滑块。我见过那些。我想让它像我添加的第二个屏幕截图那样滑过。我创造了它。这是我的代码：
Ext.define('Slider.view.Main',
{
extend: 'Ext.Container',
xtype: 'mainPage',
requires:
[
'Ext.TitleBar',
'Ext.form.Panel',
'Ext.List',
'Ext.navigation.View',
'Ext.Component',
'Ext.Panel'
],
config:
{
layout: 'fit',
items:
[
{
xtype: 'titlebar',
docked: 'top',
title: 'Slider Test',
items:
[
{
iconCls: 'list',
align: 'left',
handler: function()
{
var con1 = Ext.ComponentQuery.query('container > #container1')[0];
var draggable = Ext.ComponentQuery.query('container > #navContainer')[0];
if(con1.element.hasCls('out'))
{
draggable.hide({type: 'slideOut', direction: 'left', duration : 500});
con1.element.removeCls('out').addCls('in');
}
else
{
con1.element.removeCls('in').addCls('out');
draggable.show({type:'slideIn', direction:'right', duration : 500});
}
}
}
]
},
{
xtype: 'container',
layout: 'hbox',
itemId: 'container1',
items:
[
{
xtype: 'container',
layout: 'card',
width: 250,
hidden: true,
itemId: 'navContainer',
style: 'position: absolute; top: 0; left: 0; height: 100%;z-index: 2',
zIndex : 1,
items:
[
{
xtype: 'list',
itemTpl: '{title}',
data:
[
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
}
]
},
{
xtype: 'container',
itemId: 'mainContainer',
width: '100%',
html: 'Main content area'
}
]
}
]
}
});
回答 3
Stack Overflow用户
发布于 2014-05-19 21:38:03
检查此示例带感应器的幻灯片导航
Stack Overflow用户
发布于 2014-05-20 05:52:23
将cover设置为true。
Ext.Viewport.setMenu(this.createMenu(), {
side: 'left',
cover: true
});这将使菜单在容器顶部滑出。我不确定是否把它放在导航栏下，但是一些聪明的css可以解决这个问题。
Stack Overflow用户
发布于 2014-05-25 20:10:22
谢谢大家的建议。我能够创建我想要的，并在更新下发布代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23748333
复制
![[Linux] Nginx响应压缩gzip](https://ask.qcloudimg.com/http-save/yehe-2504969/4yhv1xrcku.png)
腾讯云开发者
