0

私は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が証明したように、上記のコードはクラシックツールキットで機能することがわかりました。しかし、私は最新のツールキットを使用しています。これと同じことをする方法はありますか？

4

1 に答える 1

1

おそらく最新のツールキットはタッチ ジェスチャ用に最適化されているため、最新のツールキットで使用できるボタン メニューはありません。

メニュー ボタンを深くネストする代わりに、次の 2 つのオプションがあります。

  1. 選択したビューポートの端からロールインするフラット メニューを使用できます。フラットメニューのみを提供する を取ることができるViewport構成があります。setMenuExt.Menu
  2. ExtJS 6 キッチン シンクがモバイル デバイスで開いた場合listのように、ビューをネストできます。その場合、フルスクリーンのリストが表示され、項目をタップするとサブリストが画面全体に表示されます。親メニューに移動する場合は、左上隅の戻るボタンを使用します。

最初のオプションは、レスポンシブ Web サイトがメニューを提供する方法であり、後者は電話の設定メニューの動作に似ています。どちらにも用途と欠点があり、どちらもユーザーに知られている必要があり、アプリをアプリのようにするか Web サイトのようにするかによって、多かれ少なかれ予想される動作になるはずです。

于 2016-11-15T14:53:23.397 に答える