ext.jsのツールバーのドロップダウンメニュー

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  | Option 3 | 
    |-------------------------| 
    | Option 1 | 
    | Option 2 | 
    ____________ 

私はツールバーやドロップダウンメニューをhereと良い例を発見したが、私はコードを配置する必要がどこ、私は本当に知らない

：だから、それはあなたがホバリングや Menuをクリックすると、（次のようになります。

私はすでに

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

のようなものを使用してみましたしかし、それは動作しません。

編集：

@Alexanderが証明した古典的なツールキットでは、上記のコードが動作することがわかりました。しかし、モダンツールキットを使用します。このために同じことをする方法はありますか？

Answer 1

近代的なツールキットには、現在のツールキットがタッチジェスチャーに最適化されているため、ボタンメニューはありません。

1. あなたがお好みのビューポートの端からロールフラットメニューを使用することができます。

   代わりに深いネストのメニューボタンの、2つのオプションがあります。 ViewportにはsetMenuの設定があり、Ext.Menuとすることができます。これはフラットメニューのみを提供します。

2. モバイルデバイスで開くとExtJS 6 kitchen sink doesのように、listビューをネストできます。その場合、フルスクリーンのリストが表示され、アイテムをタップすると、サブリストが画面全体に表示されます。親メニューに移動する場合は、左上隅の戻るボタンを使用します。

第1の選択肢は、敏感なウェブサイトがどのようにメニューを提供するかであり、後者は電話の設定メニューの働きに似ています。どちらも用途や欠点を持っていますが、どちらもユーザーに知られているはずです。アプリがもっとアプリのようなものであるか、Webサイトのようなものであるかによって多かれ少なかれ期待される動作になるはずです。