Выпадающее меню на панели инструментов 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

В современном наборе инструментов отсутствует меню кнопок, по-видимому, потому, что современный инструментарий оптимизирован для сенсорных жестов.

Вместо глубоких кнопок вложенности меню, у вас есть два варианта:

1. Вы можете использовать плоское меню, которое сворачивается в от видового экрана края по вашему выбору. Viewport имеет конфигурацию setMenu, которая может принимать Ext.Menu, которая предоставляет только плоское меню.
2. Вы можете вложить list просмотров, например ExtJS 6 kitchen sink does, если вы откроете его на мобильном устройстве. В этом случае вы получаете полноэкранный список, а когда вы нажимаете элемент, подсписок отображается на весь экран. Если вы хотите перейти в родительское меню, вы используете кнопку «Назад» в верхнем левом углу.

Первыми вариантами являются то, как гибкие веб-сайты предоставляют свое меню, последнее больше похоже на меню настроек телефона. У обоих есть свои привычки и их недостатки, оба должны быть известны пользователю и должны быть более или менее ожидаемым поведением в зависимости от того, должно ли ваше приложение больше напоминать приложение или как веб-сайт.