ExtJS中的子菜单下拉菜单

问题描述

我想创建一个带有子菜单和下拉菜单的边栏。 在HTML中，我会这样做：

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
  <button class="dropdown-btn">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#contact">Search</a>
</div>

但是在ExtJS 6.2.0版中如何实现呢？

编辑：ExtJS中所有的就是这个：

var store = Ext.create('Ext.data.TreeStore',{
    root: {
        expanded: true,children: [
            { text: 'detention',leaf: true },{ text: 'homework',expanded: true,children: [
                { text: 'book report',{ text: 'algebra',leaf: true}
            ] },{ text: 'buy lottery tickets',leaf: true }
        ]
    }
});

Ext.create('Ext.tree.Panel',{
    title: 'Simple Tree',width: 200,height: 200,store: store,rootVisible: false,renderTo: Ext.getBody()
});

我不想要的（树不是我想要的，没有下拉列表按钮!!看，HTML版本）

解决方法

您可以使用button，对于子菜单，您可以使用menu。

这里是Fiddle

这里是代码：

{
    xtype: 'button',text: 'Contact',iconCls: 'fa-link',// aligns the menu top-right to the button bottom-right
    menuAlign: 'tr-br',// these are the menu items
    menu: {
        defaults: {iconCls: 'fa-home'},items: [{
            text: 'Link 1'
        },{
            text: 'Link 2'
        },{
            text: 'Link 3'
        }]
    }
}