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'让它运转起来。

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

1 个答案: