Sencha Ext js 6でスライドメニューを作成する方法は？

Question

私は、Tritonテーマのadmin dasboardの簡単な例を作成しようとしています。しかし、正しい方法を管理することはできません。だから私は、デスクトップのためのスライドメニューの簡単な例とコンテンツエリアのコンテンツを変更する必要があります。今では私のハンバーガーのボタンにはストレッチがあり、メニュー自体はトリトンのテーマのようなものではありません。

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

これは管理ダッシュボードで使用されるtreelistコンポーネントです。 例を見てみましょう：

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

ダウンロードする必要はありません。すでにext-6.x.xフォルダーのkitchensinkにあります。