ext.js 6 工具栏中的下拉菜单

Question

我有一个 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:

   __________________________
   | Menu       |   Option 3 |
   |-------------------------|
   |   Option 1 |
   |   Option 2 |
    ____________

我找到了一个很好的工具栏和下拉菜单示例 here，但我真的不知道我必须将代码放在哪里。

我已经尝试过使用

items: [
    { text: 'Menu', menu: [{text: 'Option 1'}, {text: 'Option 2'}] },
    { text: 'Option 3', handler: 'onOption3Click' },
]

但这不起作用。

编辑：

我发现上面的代码适用于@Alexander 证明的经典工具包。但我使用 现代工具包。有没有办法对此做同样的事情？

Answer 1

现代工具包中没有可用的按钮菜单，大概是因为现代工具包针对触摸手势进行了优化。

除了深层嵌套菜单按钮，您有两个选择：

您可以使用从您选择的视口边缘滚入的平面菜单。 Viewport 有一个 setMenu 配置可以采用 Ext.Menu，它只提供一个平面菜单。
您可以嵌套 list 个视图，例如 ExtJS 6 kitchen sink does 如果您在移动设备上打开它。在这种情况下，你会得到一个全屏列表，当你点击一个项目时，子列表会显示在整个屏幕上。如果您想转到父菜单，请使用左上角的后退按钮。

第一个选项是响应式网站如何提供菜单，后者更像是 phone 的设置菜单。两者都有其用法和缺点，都应该为用户所知，并且应该或多或少是预期的行为，具体取决于您的应用程序应该更像应用程序还是更像网站。

ext.js 6 工具栏中的下拉菜单

Dropdown menu in ext.js 6 toolbar

javascript

extjs

extjs6

extjs6-modern