PDA

View Full Version : [CLOSED] Submenu in a menu panel



jpadgett
May 10, 2013, 2:07 PM
I've been playing around with the menu panel, and I would like to use it in my application over the tree panel for my side menu. However, the example only goes one menu tier deep, and I can't find an example with sub-menus. I put one in myself, but I'm not sure that it results in the look or feel of what a sub-menu should be. See the two attached images - one with a Title/Header, and one without.

6193 6194

Is there a way to properly put a sub-menu in a menu panel? I would ultimately want Menu Panel > Item 1 to have the collapse trigger for the sub-menu under it.

Here is the sample code for the images:


@(
Html.X().Panel()
.Border(false)
.ID("testpanel")
.Items(

Html.X().MenuPanel()
.ID("testmenu")
.Title("Menu Panel")
.Icon(Icon.Anchor)
.Collapsible(true)
.Menu(menu =>
{
menu.Items.Add(
Html.X().MenuItem().Text("Items 1").Icon(Icon.Application).OnClientClick("alert('you clicked me!');")
);

menu.Items.Add(
Html.X().MenuPanel()
.Title("Inner Menu")
.ID("innermenu")
.Menu(imenu =>
{
imenu.Items.Add(
Html.X().MenuItem().Text("Items i1").Icon(Icon.Application).OnClientClick("alert('you clicked me!');")
);
imenu.Items.Add(
Html.X().MenuItem().Text("Items i2").Icon(Icon.Application).OnClientClick("alert('you clicked me!');")
);
imenu.Items.Add(
Html.X().MenuItem().Text("Items i3").Icon(Icon.Application).OnClientClick("alert('you clicked me!');")
);
}
)
);

menu.Items.Add(
Html.X().MenuItem().Text("Items 3")
);
}
),

Html.X().MenuPanel()
.ID("Testmenu2")
.Title("Menu Panel 2")
.Collapsible(true)
.Menu(menu =>
{
menu.Items.Add(
Html.X().MenuItem().Text("Items 1").Icon(Icon.Application).OnClientClick("alert('you clicked me!');")
);

menu.Items.Add(
Html.X().MenuItem().Text("Items 2").Icon(Icon.Folder)
);

menu.Items.Add(
Html.X().MenuItem().Text("Items 3")
);
}
)
)
)

Daniil
May 10, 2013, 3:03 PM
Hi @jpadgett,

I am not sure, but, maybe, you need the following structure.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:MenuPanel runat="server" Width="200" Title="Parent MenuPanel">
<Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Item 1" />

<ext:MenuItem runat="server" Text="Item 2">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Item 2.1" />
<ext:MenuItem runat="server" Text="Item 2.2" />
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
</form>
</body>
</html>

jpadgett
May 10, 2013, 5:58 PM
That is pretty close. It creates a menu out to the side. Is there a way to configure it to drop underneath the parent menu item and stay visible, instead of appearing out to the side and then disappearing when the user makes a selection? Basically, collapsible like the menu panel.

6195



Html.X().MenuPanel()
.ID("TestMenu3")
.Title("Menu Panel 3")
.Collapsible(true)
.Menu(menu =>
{
menu.Items.Add(
Html.X().MenuItem()
.Text("Items 1")
.Menu(
Html.X().Menu()
.Items(smenu =>
{
smenu.Add(Html.X().MenuItem().Text("Items 1"));
smenu.Add(Html.X().MenuItem().Text("Items 2"));
smenu.Add(Html.X().MenuItem().Text("Items 3"));
}
)
)
);

menu.Items.Add(
Html.X().MenuItem().Text("Items 2").Icon(Icon.Folder)
);

menu.Items.Add(
Html.X().MenuItem().Text("Items 3")
);
}
)

Baidaly
May 10, 2013, 8:36 PM
Hello!

Try to use MenuAlign attribute: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.menu.Item-cfg-menuAlign



<ext:MenuItem runat="server" Text="Item 2" MenuAlign="bl-tl?">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Item 2.1" />
<ext:MenuItem runat="server" Text="Item 2.2" />
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>

Daniil
May 13, 2013, 5:19 AM
To avoid hiding of a menu on menu item click, please set up

HideOnClick="false"
for the MenuItems.