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

Question

I'm quite new to Sencha Extjs6. I'm making a universal app (focusing on the mobile right now) and I'm trying to add a NestedList into a Menu. I have the Menu sliding in from the left and I can display the NestedList, but when I drill down the items in the list get mixed up? Ie It'll show the parent item as well as its children. If I click back to the root then it'll still display all the leaf nodes etc when it should just show the root item. There's no slide animation between the items either so it makes me think it's not currently possible to use it this way?

When I create the NestedList in isolation (not added to an Ext.Menu) then it works as expected (similar to the KitchenSink example).

This is what I have thus far:

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 The nested list is added to this.

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 I have my own data, but I tried it with the carregions example and still didn't change the behaviour.

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']
    }
});

In a nutshell it works as a standalone component when added to the viewport, but not when I add it as a component into a menu. Any help or guidance would be fantastic. Thanks a lot guys. :)

Answer 1

I managed to solve it. It seems that removing layout: 'fit' got it working.