Wie erstelle ich ein Dia-Menü mit Sencha Ext js 6?

Question

Ich versuche, ein einfaches Beispiel für admin dasboard mit Triton-Thema zu erstellen. Aber ich schaffe es nicht, es richtig zu machen. Also brauche ich ein einfaches Beispiel für das Folienmenü für den Desktop und um Inhalt in einem Inhaltsbereich zu ändern. Jetzt ist mein Hamburger-Button gestreckt und das Menü selbst ist nicht mehr so ​​wie im Triton-Thema.

Ext.define('KitchenSink.view.Menus', 
{ 

extend: 'Ext.Container', 
xtype: 'app-main', 
//controller: 'main', 
requires: [ 
    'Ext.Menu' 
], 
layout: { 
    type: 'card' 
}, 
items: [ 
    { 
    /*xtype: 'toolbar', 
    docked: 'top', 
    title: 'Slider Menu',*/ 
    //docked: 'top', 
    xtype: 'panel', 
    styleHtmlContent: true, 
    html: ['<b>Plan'].join(''), 

    items: [ 
     { 
      xtype: 'button', 
      handler: function() { 
       if(Ext.Viewport.getMenus().left.isHidden()){ 
       Ext.Viewport.showMenu('left'); 
       } else { 
       Ext.Viewport.hideMenu('left'); 
       } 
      } 
     } 
    ] 
}], 
initialize: function(){ 
    Ext.Viewport.setMenu(this.createMenu(),{ 
    side: 'left', 
    reveal: true 
    }); 
}, 
createMenu: function(){ 
    var menu = Ext.create('Ext.Menu', { 
    width: 250, 
    scrollable: 'vertical', 
    items: [ 
     { 
      xtype: 'button', 
      text: 'Option 1', 
     },{ 
      xtype: 'button', 
      text: 'Option 2', 
     } 
    ] 
    }); 
    return menu; 
} 


}); 

Ext.application({ 
name: 'Foo', 
mainView: 'KitchenSink.view.Menus' 
}); 

Answer 1

es ist die Baumstruktur-Komponente, die im Admin-Dashboard verwendet wird. Werfen Sie einen Blick auf das Beispiel:

http://examples.sencha.com/extjs/6.0.1/examples/kitchensink/#tree-list.

Sie müssen es nicht herunterladen. Es ist bereits in Ihrem Kitchenink-Beispiel Ihres ext-6.x.x-Ordners.