Nested menu items

[mortenoh]

Hi

There seems to be a bug with nested menu items if you use <Menu /> and not a config object. I have a very simple menu in a toolbar like this:


<Toolbar docked="bottom">
<Button text="Button 1">
<Menu>
<MenuItem iconCls="x-fa fa-home" text="Menu Item 1"/>
<MenuItem iconCls="x-fa fa-database" text="Menu Item 2"/>
<MenuItem iconCls="x-fa fa-music" text="Menu Item 3"/>
<MenuItem iconCls="x-fa fa-user" text="Menu Item 4" menu={subMenu}/>
</Menu>
</Button>
<Container flex={1}/>
<Button text="Button 2"/>
</Toolbar>



If I let subMenu be another <Menu /> item like


const subMenu = <Menu>
<MenuItem iconCls="x-fa fa-home" text="Menu Item 4.1"/>
<MenuItem iconCls="x-fa fa-database" text="Menu Item 4.2"/>
<MenuItem iconCls="x-fa fa-music" text="Menu Item 4.3"/>
<MenuItem iconCls="x-fa fa-user" text="Menu Item 4.4"/>
</Menu>;


The menu item has a pointer indicating nested menu, but it shows up empty. If I however use a config object:


const subMenu = {
xtype: 'menu',
items: [{
text: 'Menu Item 4.1',
iconCls: 'x-fa fa-home'
}, {
text: 'Menu Item 4.2',
iconCls: 'x-fa fa-database'
}, {
text: 'Menu Item 4.3',
iconCls: 'x-fa fa-music'
}, {
text: 'Menu Item 4.4',
iconCls: 'x-fa fa-user'
}]
};


It works fine. Am I doing something wrong or is this a bug?

[Mark.Brocato]

Thanks for the report! I have opened a bug in our bug tracker.

[Mark.Brocato]

It appears this is a bug. The proper way to use submenus should be as follows:



<Toolbar docked="bottom">
<Button text="Button 1">
<Menu>
<MenuItem iconCls="x-fa fa-home" text="Menu Item 1"/>
<MenuItem iconCls="x-fa fa-database" text="Menu Item 2"/>
<MenuItem iconCls="x-fa fa-music" text="Menu Item 3"/>
<MenuItem iconCls="x-fa fa-user" text="Menu Item 4">
<Menu>
<MenuItem iconCls="x-fa fa-home" text="Menu Item 4.1"/>
<MenuItem iconCls="x-fa fa-database" text="Menu Item 4.2"/>
<MenuItem iconCls="x-fa fa-music" text="Menu Item 4.3"/>
<MenuItem iconCls="x-fa fa-user" text="Menu Item 4.4"/>
</Menu>
</MenuItem>
</Menu>
</Button>
</Toolbar>


But the above does not currently work either. Using a config object with xtypes and assigning it to the menu prop is the best workaround at the moment. We'll see about getting this fixed in 6.5.1.

[bodyboarder20]

Confirmed that this was not fixed in 6.5.1 or 6.5.2. Not entirely sure why this post is marked as [FIXED]. Please reopen this issue.