Sep 10, 2018, 7:32 PM
[CLOSED] SplitButton overflow menu not shown correctly
Hello support team,
please refer to a considerably simplified test case of relatively sophisticated application toolbar rendering (based on button groups / buttons registration and user preferences). When using SplitButton in the toolbar, I noticed the strange behavior of the overflow menu.
_LayoutPartial.cshtml:
1. The overflow menu is displayed incorrectly (it takes the full width of the browser)
2. After toolbar (window) resize, the menu on split buttons is not shown
3. After toolbar (window) resize, the "Output" button group and the "Overflow" menu button are rendered "randomly" - shown/hidden independently on the available space
Am I doing something wrong?
Ext.NET 4.7.1
Ext JS 6.6.0.258
Thank you for your assistance.
Dan
please refer to a considerably simplified test case of relatively sophisticated application toolbar rendering (based on button groups / buttons registration and user preferences). When using SplitButton in the toolbar, I noticed the strange behavior of the overflow menu.
_LayoutPartial.cshtml:
@{
Layout = null;
var X = Html.X();
}
@(Html.X().ResourceManager())
@{Container container = X.Container().ItemsFromPartial("ApplicationToolbar");}
@(
X.Window().Width(400).Height(200).Items(
X.Panel()
.Layout(LayoutType.Fit)
.BodyPadding(0)
.Border(false)
.DockedItems(container)
.ItemsFromSection(this, "ITEMS", true)
)
)
@RenderBody()
ApplicationToolbar.cshtml:@using TestCases.Models;
@{AppToolbarRenderer renderer = new AppToolbarRenderer();}
@renderer.RenderApplicationToolbar()
Index.cshtml:@{
Layout = "~/Views/Shared/_LayoutPartial.cshtml";
var X = Html.X();
}
@section ITEMS {}
ToolbarModel.cs:using Ext.Net;
namespace TestCases.Models
{
public class AppToolbarRenderer
{
public Toolbar.Builder RenderApplicationToolbar()
{
Toolbar toolbar = new Toolbar()
{
Border = false,
Dock = Dock.Top,
EnableOverflow = true,
OverflowHandler = OverflowHandler.Menu
};
toolbar.Plugins.Add(new BoxReorderer());
toolbar.LayoutConfig.Add(new HBoxLayoutConfig() { Align = HBoxAlign.Stretch });
ButtonGroup grpSave = new ButtonGroup { Title = "Save" };
// just to make toolbar wider:
grpSave.Items.Add(new Button { Icon = Icon.Disk, IconAlign = IconAlign.Top, Text = "Save" });
grpSave.Items.Add(new Button { Icon = Icon.DiskEdit, IconAlign = IconAlign.Top, Text = "Save+New" });
grpSave.Items.Add(new Button { Icon = Icon.DiskMagnify, IconAlign = IconAlign.Top, Text = "Save+Clone" });
grpSave.Items.Add(new Button { Icon = Icon.DiskError, IconAlign = IconAlign.Top, Text = "Save+Close" });
ButtonGroup grpOutput = new ButtonGroup { Title = "Output", Columns = 2 };
SplitButton btn1 = AppToolbarSplitButton.Print();
btn1.Menu[0].Add(new Ext.Net.MenuItem("Print Option 1"));
btn1.Menu[0].Add(new Ext.Net.MenuItem("Print Option 2"));
SplitButton btn2 = AppToolbarSplitButton.Preview();
btn2.Menu[0].Add(new Ext.Net.MenuItem("Preview Option 1"));
btn2.Menu[0].Add(new Ext.Net.MenuItem("Preview Option 2"));
SplitButton btn3 = AppToolbarSplitButton.Pdf();
btn3.Menu[0].Add(new Ext.Net.MenuItem("Pdf Option 1"));
btn3.Menu[0].Add(new Ext.Net.MenuItem("Pdf Option 2"));
grpOutput.Items.Add(btn1);
grpOutput.Items.Add(btn2);
grpOutput.Items.Add(btn3);
toolbar.Items.Add(grpSave);
toolbar.Items.Add(grpOutput);
return toolbar.ToBuilder();
}
}
public class AppToolbar : Toolbar { }
public class AppToolbarSplitButton : SplitButton
{
public AppToolbarSplitButton()
{
Scale = ButtonScale.Small;
IconAlign = IconAlign.Top;
}
public static AppToolbarSplitButton Print()
{
AppToolbarSplitButton btn = new AppToolbarSplitButton
{
Icon = Icon.Printer,
Text = "Print",
OverflowText = "Print",
ArrowVisible = false,
RowSpan = 2
};
Menu m = new Menu();
m.Listeners.Add.Handler = "if (this.items.length == 1) { this.ownerCmp.setArrowVisible(true); if (this.ownerCmp.ownerCt && !this.ownerCmp.ownerCt.hidden) this.ownerCmp.ownerCt.updateLayout(); }"; // show arrow after the first menu item is added
btn.Menu.Add(m);
return btn;
}
public static AppToolbarSplitButton Preview()
{
AppToolbarSplitButton btn = new AppToolbarSplitButton
{
Icon = Icon.Layout,
IconAlign = IconAlign.Left,
Text = "Preview",
TextAlign = ButtonTextAlign.Left,
OverflowText = "Preview",
ArrowVisible = false,
WidthSpec = "100%"
};
Menu m = new Menu();
m.Listeners.Add.Handler = "if (this.items.length == 1) { this.ownerCmp.setArrowVisible(true); if (this.ownerCmp.ownerCt && !this.ownerCmp.ownerCt.hidden) this.ownerCmp.ownerCt.updateLayout() }";
btn.Menu.Add(m);
return btn;
}
public static AppToolbarSplitButton Pdf()
{
AppToolbarSplitButton btn = new AppToolbarSplitButton
{
Icon = Icon.PageWhiteAcrobat,
IconAlign = IconAlign.Left,
Text = "PDF",
TextAlign = ButtonTextAlign.Left,
OverflowText = "PDF",
ArrowVisible = false,
WidthSpec = "100%"
};
Menu m = new Menu();
m.Listeners.Add.Handler = "if (this.items.length == 1) { this.ownerCmp.setArrowVisible(true); if (this.ownerCmp.ownerCt && !this.ownerCmp.ownerCt.hidden) this.ownerCmp.ownerCt.updateLayout() }";
btn.Menu.Add(m);
return btn;
}
}
}
There are several issues accountered here:1. The overflow menu is displayed incorrectly (it takes the full width of the browser)
2. After toolbar (window) resize, the menu on split buttons is not shown
3. After toolbar (window) resize, the "Output" button group and the "Overflow" menu button are rendered "randomly" - shown/hidden independently on the available space
Am I doing something wrong?
Ext.NET 4.7.1
Ext JS 6.6.0.258
Thank you for your assistance.
Dan
Last edited by fabricio.murta; Oct 10, 2018 at 3:51 PM.