Dropdown menu in ext.js 6 toolbar

Question

I have an ExtJs 6.2. application with a toolbar which is defined in the Main.js as follows:

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
        }
    ]

});

How can I transform the 2 items (Option 1, Option 2) into a dropdown menu? So it should look like this (when you hover or click on Menu:

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

I have found a good example with toolbars and dropdown menus here but I don't really know where I have to put the code.

I already tried using something like

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

But that doesn't work.

Edit:

I figured out that the code above works for the classic toolkit as @Alexander proved. But I use the modern toolkit. Is there a way doing the same for this?

Answer 1

There is no button menu available in modern toolkit, presumably because the modern toolkit is optimized for touch gestures.

Instead of deep nesting menu buttons, you have two options:

1. You could use a flat menu that rolls in from a viewport edge of your choice. Viewport has a setMenu config that can take an Ext.Menu, which only provides a flat menu.
2. You could nest list views, like ExtJS 6 kitchen sink does if you open it on a mobile device. In that case, you get a fullscreen list, and when you tap an item, the sublist is shown on the whole screen. If you want to go to the parent menu, you use the back button in the top left corner.

The first options is how responsive web sites provide their menu, the latter is more like the phone's settings menu works. Both have their usages and their drawbacks, both should be known to the user and should be more or less expected behaviour, depending on whether your app should be more like an app or like a web site.