Sencha Extjs6 - Современный инструментарий - Вложенный список внутри Ext.Menu

Question

Я совершенно новый для Sencha Extjs6. Я делаю универсальное приложение (сфокусированное на мобильном телефоне прямо сейчас), и я пытаюсь добавить NestedList в меню. У меня есть меню, скользящее слева, и я могу отобразить NestedList, но когда я разворачиваю элементы в списке, вы будете замешаны? То есть Он покажет родительский элемент, а также его дочерние элементы. Если я вернусь к корню, он все равно отобразит все листовые узлы и т. Д., Когда он должен просто показать корневой элемент. Между предметами нет слайд-анимации, поэтому мне кажется, что в настоящее время это невозможно использовать?

Когда я создаю NestedList изолированно (не добавляется к Ext.Menu), то он работает так, как ожидалось (аналогично примеру KitchenSink).

Это то, что я до сих пор:

MenuList.js

Ext.define('mobile.view.menu.MenuList', { 
    extend: 'Ext.NestedList', 
    xtype: 'menulist', 
    store: 'mobile.store.menu.MenuListStore', 
    controller: 'listcontroller', 
    displayField: 'text', 
    title: 'Menu', 
    width: '100%', 
    itemId: 'menulist', 
    layout: 'fit', 
    styleHtmlContent: true, 
    useTitleAsBackText: false, 
    backText: ' ', 
    scrollable: true 
}); 

NavigationMenu.js Вложенный список добавляется к этому.

Ext.define('mobile.view.menu.NavigationMenu', { 
    extend: 'Ext.Menu', 
    xtype: 'navigation', 
    controller: 'navigation-controller', 
    renderTo: document.body 

    ... 
    ... 
    ... 

    getMenuCfg: function(side) { 
     var me = this; 

     return { 
      items:[{ 
       xtype: 'menulist' 
      }, { 
       text: 'Log out', 
       textAlign: 'left' 
       ... 
      }] 
     } 
    } 

MenuListStore.js У меня есть свои собственные данные, но я попробовал это на примере carregions и до сих пор не изменили поведение.

Ext.define('mobile.store.menu.MenuListStore', { 
    extend: 'Ext.data.TreeStore', 
    config: { 
     model: 'mobile.model.menu.MenuItem', 
     root: {}, 
     proxy: { 
      type: 'ajax', 
      url: 'resources/carregions.json' 
     } 
    } 
}); 

MenuItem.js

Ext.define('mobile.model.menu.MenuItem', { 
    extend: 'Ext.data.Model', 
    config: { 
     fields: ['text'] 
    } 
}); 

В двух словах он работает как компонент автономной при добавлении к иллюминатору, но не тогда, когда я добавляю его в качестве компонента в меню. Любая помощь или руководство были бы фантастическими. Большое спасибо, ребята. :)

Answer 1

Мне это удалось. Кажется, что удаление макета: «fit» заставил его работать.