Блог

Я хочу создать боковую панель с подменю и выпадающими меню. В 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', leaf: true },
                { 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 .

Вот скрипка

И вот код:

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