Sencha Ext js 6 ile bir slayt menüsü nasıl oluşturulur?

Question

Triton teması ile basit bir yönetim dasboard örneği oluşturmaya çalışıyorum. Ama bunu nasıl doğru yapacağını yönetemiyorum. Bu nedenle, masaüstü için basit bir slayt menüsü örneğine ve içerik alanındaki içeriği değiştirmeye ihtiyacım var. Şimdi hamburger düğmem streched ve sol menü kendisi bir triton teması gibi değil.

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

o yönetici gösterge tablosunda kullanılan treelist bileşeni var. Aşağıdaki örneğe bakın:

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

İndirmek zorunda değilsiniz. Bu zaten kendi ext-6.x.x klasörünüzün örneğidir.