Hello @bbros!
Thanks for the even cleaner test case. Notwithstanding I will include icons in the provided response in order to ensure the point raised in github works here. After all, you actually could display the menu entries without a menu panel, and just their icons were misplaced.
This alternative involves using Ext.NET 5's MenuPanel component. As we don't have another component taking a
<menu> tag helper to base on, we'll build the menu entries from code behind -- which in the end maybe is what you need?
View code (standalone, disabling layouts to avoid missing bits and pieces):
@page
@model MyProject.t63075_accordionMenuModel
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Issue extnet/Ext.NET#1851</title>
</head>
<body>
<h1>Issue extnet/Ext.NET#1851</h1>
<ext-container
width="240"
scrollable="true"
layout="Accordion">
<items>
@{
foreach (var item in Model.Menus)
{
var panelTitle = item.Title;
item.Title = null;
<ext-panel title="@panelTitle" x-xtype="netmenupanel" x:model-menu="item" />
}
}
</items>
</ext-container>
</body>
</html>
Please note how we reference a panel and override its x-type (client-side class handle). Then bind an arbitrary model as its inner
menu property. That "arbitrary model" is simply a list of menus that will be wrapped in these menu panels.
To build the menus, in turn, this is what I've done in controller code:
using Ext.Net;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyProject
{
public class t63075_accordionMenuModel : PageModel
{
public List<Menu> Menus = new List<Menu>();
// Just a list of material design icon cls to bind, in order, to menu items.
private string[] IconClses = new string[] { "home", "analytics", "api", "toll", "build", "book", "help", "gavel", "https", "support", "verified" };
public void OnGet()
{
// Add 4 menus (that will be accordion panels)
Menus.Add(SubItem("File", 10));
Menus.Add(SubItem("Edit", 4));
Menus.Add(SubItem("Options", 8));
Menus.Add(SubItem("About", 3));
}
private Menu SubItem(string name, int subCount)
{
var menu = new Menu()
{
Title = name
};
// Properly nest MenuItem instances within the Menu.
for (var cnt = 1; cnt <= subCount; cnt++)
{
menu.Items.Add(new MenuItem()
{
Text = "Item #" + cnt,
IconCls = "x-md md-icon-" + IconClses[cnt % IconClses.Length]
});
}
return menu;
}
}
}
Here we just, code-wise, repeat the behavior that would be equivalent to this markup if the
MenuPanel component were supported:
<ext-menu title="@name">
<items>
<ext-menuItem Text="Item #1" iconCls="x-md-md-icon-home" />
<ext-menuItem Text="Item #1" iconCls="x-md-md-icon-analytics" />
<ext-menuItem Text="Item #1" iconCls="x-md-md-icon-api" />
</items>
</ext-menu>
These blocks would then be inserted in the panel, properly composing the
MenuPanel component.
Contrary to what I said in the GitHub issue you linked, the
MenuPanel client-side code is actually included in Ext.NET 7, so it is possible to reactivate it using this approach. You can also adopt a 100% C# approach and add the inner
menu config to the panels using the
CustomConfig property.
In case you're wondering about going fully model-driven, here's what the page would look like:
View
<ext-container model="Model.AccordionContainer" />
Controller
// Declared as 'public Container AccordionContainer;'
AccordionContainer = new Container()
{
Width = 240,
Scrollable = true,
Layout = LayoutType.Accordion
};
var menuPanel = new Panel()
{
Title = "File",
CustomConfig = new JsObject()
};
menuPanel.CustomConfig.Add("xtype", "netmenupanel");
menuPanel.CustomConfig.Add("menu", new JsObject(SubItem(null, 10)));
AccordionContainer.Items.Add(menuPanel);
menuPanel = new Panel()
{
Title = "Edit",
CustomConfig = new JsObject()
};
menuPanel.CustomConfig.Add("xtype", "netmenupanel");
menuPanel.CustomConfig.Add("menu", new JsObject(SubItem(null, 4)));
AccordionContainer.Items.Add(menuPanel);
As this won't be included in the UX development cycle, we've also logged
GitHub issue #1852 to track the support status of the
MenuPanel component in Ext.NET 7.
An update shall be posted here as soon as we get the feature in Ext.NET 7.
Hope this helps!
