我有一个 ExtJs 6.2。带有工具栏的应用程序在 Main.js
中定义如下:
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.Container',
xtype: 'app-main',
requires: [
'Ext.layout.VBox'
],
views: [
'MyApp.view.main.WrapperMainContent'
],
controller: 'mainController',
layout: {
type: 'vbox',
pack: 'center',
align: 'stretch'
},
margin: '0 0 0 0',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{ text: 'Option 1', handler: 'onOption1Click' },
{ text: 'Option 2', handler: 'onOption2Click' },
{ text: 'Option 3', handler: 'onOption3Click' },
]
},
{
xtype: 'wrapperMainContent',
flex: 1
}
]
});
如何将 2 个项目(选项 1、选项 2)转换为下拉菜单?所以它应该看起来像这样(当您将鼠标悬停或单击菜单
时:
__________________________
| Menu | Option 3 |
|-------------------------|
| Option 1 |
| Option 2 |
____________
我找到了一个很好的例子,带有工具栏和下拉菜单here但我真的不知道我必须把代码放在哪里。
我已经尝试过使用类似的东西
items: [
{ text: 'Menu', menu: [{text: 'Option 1'}, {text: 'Option 2'}] },
{ text: 'Option 3', handler: 'onOption3Click' },
]
但这行不通。
编辑:
我发现上面的代码适用于经典工具包,正如@Alexander 所证明的那样。但我使用现代工具包。有没有办法做到同样的事情?
最佳答案
现代工具包中没有可用的按钮菜单,大概是因为现代工具包针对触摸手势进行了优化。
您有两种选择,而不是深层嵌套菜单按钮:
- 您可以使用从您选择的视口(viewport)边缘滚动的平面菜单。
Viewport
有一个setMenu
可以采用Ext.Menu
的配置,它仅提供平面菜单。 - 您可以嵌套
list
View ,例如 ExtJS 6 kitchen sink does如果您在移动设备上打开它。在这种情况下,您将获得全屏列表,当您点击某个项目时,子列表将显示在整个屏幕上。如果您想转到父菜单,请使用左上角的后退按钮。
第一个选项是响应式网站如何提供菜单,后者更像是手机的设置菜单的工作方式。两者都有其用途和缺点,两者都应该为用户所知,并且应该或多或少是预期的行为,具体取决于您的应用程序应该更像应用程序还是网站。
关于javascript - ext.js 6 工具栏中的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40593958/