Sencha Extjs6 - 现代工具包 - Ext.Menu 中的 NestedList

Question

我对 Sencha Extjs6 很陌生。我正在制作一个通用应用程序（现在专注于移动设备）并且我正在尝试将 NestedList 添加到菜单中。我有从左侧滑入的菜单，我可以显示 NestedList，但是当我向下钻取列表中的项目时会混淆吗？ IE。它将显示父项及其子项。如果我单击回到根，那么当它应该只显示根项时，它仍会显示所有叶节点等。项目之间也没有幻灯片动画，所以这让我觉得目前不可能以这种方式使用它？

当我单独创建 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 我有自己的数据，但我用汽车区域示例进行了尝试，但仍然没有改变行为。

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' 让它工作。

Sencha Extjs6 - 现代工具包 - Ext.Menu 中的 NestedList

Sencha Extjs6 - Modern toolkit - NestedList inside an Ext.Menu

mobile

extjs

menu

extjs6

universal