Question

我正在尝试使用Triton主题创建一个简单的admin dasboard示例。但无法管理如何使其正确。所以我需要一个简单的桌面幻灯片菜单示例，以及更改内容区域中的内容。现在我的汉堡包按钮被拉伸，左边的菜单本身不像triton主题那样。

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

您不必下载它。它已经在您的kitchen -ink-ext-6.x.x文件夹的示例中。

如何使用Sencha Ext js 6创建幻灯片菜单？

1 个答案: