PDA

View Full Version : Nest Menu panels



Kcarpenter
2 May 2012, 5:50 AM
Morning All,
I've come across the need for a "nested" context menu, I think I am close but still have a few painful issues that I can't seem to get to go away.

I have a context menu that is shown on a dataview.
One of the menuitems of this context menu, should pop out a new menu panel with a list of options that is dynamically loaded based on which item in the dataview they are right clicking on.

That said, I have the main menu showing, a I have a second menu that pops out on the mouseover event for the menu item that should show an aditional menu.

The Problem: The original menu window closes on its own when showBy() on the second menu is called. It seems to me like 2 menus can't be shown at the same time?

Am I even approaching this correctly? I can't seem to find a "native" way in the library to build a nested menu panel.

Below is the code I am attempting to use, other than the cMenu1 items.



var cMenu1 = Ext.create('Ext.menu.Menu', {
shadow: 'drop',
listeners: {
mouseover: function (mnu, item){
if(item != null && item.name == 'options'){
store.load();
var cMenu2 = Ext.create('Ext.menu.Menu', {
});
fstore.each(function(rec){
var menuitem = Ext.create('Ext.menu.Item', {
text: rec.get('name')
});
cMenu2.add(menuitem);
});
cMenu2.showBy(item, 'r');
}
}
}
});

Tim Toady
2 May 2012, 7:28 AM
I don't follow exactly what you are trying to do, but as far as the showBy problem is concerned, menus can have submenus. eg


{
xtype: 'button',
text: 'item'
menu: [
{
text: 'item2',
menu: [
{
text: 'subitem'
}
]
}
]
}

Kcarpenter
2 May 2012, 10:35 AM
Afternoon Tim,
Sorry for the confusion, I've attached a picture that well help with a visual.

Pretty much trying to have a context menu, with a few items, some of these items should open up a new menu.

I've tried nesting a menu within a menu and that doesn't seem to work, netiher does adding a menuitem to a menuitem.

Tim Toady
2 May 2012, 11:24 AM
Here's a full working tree with submenus.


Ext.create( 'Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'treepanel',
store: Ext.create( 'Ext.data.TreeStore', {
root: {
expanded: true,
text: "My Root",
children: [
{ text: "Child 1", leaf: true },
{ text: "Child 2", expanded: true, children: [
{ text: "GrandChild", leaf: true }
] }
]
}
} ),
listeners: {
itemcontextmenu: function( view, rec, item, index, e, eopts ) {
var menu = Ext.create( 'Ext.menu.Menu', {
items: [
{
text: rec.get( 'text' ),
menu: [
{
text: 'item2',
menu: [
{
text: 'subitem'
}
]
}
]
},
{
text: 'other item'
}
],
listeners: {
hide: function( me ) {
me.destroy();
}
}
} );

menu.showAt( e.getXY() );
e.preventDefault();
}
}
}
]
} );

Kcarpenter
2 May 2012, 12:41 PM
Thank you Tim, would have been much easier on all of us if the documentation showed anything about a 'menu' config for a menuitem. :-?

Again thanks a lot.