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?

[It should work. it works for me.](https://fiddle.sencha.com/#fiddle/1kbb) — Alexander, Nov 14 '16 at 19:43
Sorry, I forgot to say that I use the modern toolkit. Is there a way to do the same using the modern toolkit instead of classic? — Peter, Nov 14 '16 at 22:38
Nope, there isn't, because how do you hover a menu item on a touchscreen. You could look into the documentation/reference for modern toolkit, search for menu, and you would find that the button has none, only the viewport has, and that menu isn't a tree, just a list. — Alexander, Nov 15 '16 at 10:00
Thanks, I think I'll try this: http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/?modern#menus If you want you can post your comment that this won't work for the modern toolkit and I'll accept it. — Peter, Nov 15 '16 at 14:37

score 1 · Accepted Answer · answered Nov 15 '16 at 14:53

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:

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

Thanks for this answer! I have a different problem now with the kitchen sink example. Would be nice if you can have a look at it! :) http://stackoverflow.com/questions/40614059/access-controller-in-extjs-kitchensink-menu-example — Peter, Nov 15 '16 at 15:48

Dropdown menu in ext.js 6 toolbar

1 Answers1