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>

我不想要这棵树不是我想要的没有下拉列表按钮！！请参见，HTML版本

您可以使用按钮，对于子菜单，您可以使用菜单

这是一个

下面是代码：

{
    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'
        }]
    }
}

{
    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'
        }]
    }
}