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 |
    ____________

我找到了一个工具栏和下拉菜单一个很好的例子， 在这里 ，但我真的不知道，我必须把代码。

我已经尝试使用类似的东西

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

但这是行不通的。

编辑：

我发现@Alexander证明了上述代码适用于经典工具箱。 但是我使用现代工具箱 。 有没有办法做到这一点？

Answer 1

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

您可以使用两个选项来代替深层嵌套的菜单按钮：

1. 您可以使用从您选择的视口边缘滚动的平面菜单。 Viewport具有setMenu配置，该配置可以接受Ext.Menu ，后者仅提供一个平面菜单。
2. 您可以嵌套list视图，就像在移动设备上打开ExtJS 6厨房水槽一样 。 在这种情况下，您将获得一个全屏列表，然后点击一个项目，子列表将显示在整个屏幕上。 如果要转到父菜单，请使用左上角的“后退”按钮。

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