ext.js中的下拉菜單6工具欄

我有一個ExtJs 6.2。應用與一個工具條，其在Main.js定義如下：ext.js中的下拉菜單6工具欄

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證明的經典工具包。但我使用現代工具包。有沒有辦法做到這一點？

來源

2016-11-14 Peter

[它應該工作。它適用於我。]（https://fiddle.sencha.com/#fiddle/1kbb） – Alexander

對不起，我忘了說我使用現代工具包。有沒有辦法使用現代工具包而不是經典工具來實現這一點？ – Peter

不，不存在，因爲如何將菜單項懸停在觸摸屏上。您可以查看現代工具包的文檔/參考資料，搜索菜單，並且您會發現該按鈕沒有，只有視口具有，並且該菜單不是樹，而只是一個列表。 – Alexander

現代工具包中沒有可用的按鈕菜單，可能是因爲現代工具包針對觸摸手勢進行了優化。

取而代之的深度嵌套菜單按鈕，你有兩個選擇：

您可以使用您選擇的視口邊緣卷在一個平面菜單。 Viewport有一個setMenu配置，可以採取Ext.Menu，它只提供一個平面菜單。
您可以嵌套list視圖，如果您在移動設備上打開它，則可以使用ExtJS 6 kitchen sink does。在這種情況下，您將獲得一個全屏列表，當您點擊一個項目時，子列表將顯示在整個屏幕上。如果您想要轉到父級菜單，請使用左上角的後退按鈕。

第一個選項是響應式網站如何提供菜單，後者更像手機的設置菜單。兩者都有它們的用法和缺點，都應該被用戶所知，並且應該是或多或少預期的行爲，這取決於你的應用應該更像是應用還是像網站。

來源

2016-11-15 14:53:23 Alexander

感謝您的回答！我現在與廚房水槽的例子有不同的問題。如果你可以看看它會很好！ :) http://stackoverflow.com/questions/40614059/access-controller-in-extjs-kitchensink-menu-example – Peter

ext.js中的下拉菜單6工具欄

回答

相關問題