[CLOSED] SplitButton overflow menu not shown correctly

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [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:
    @{
        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.

Similar Threads

  1. [CLOSED] change Toolbar overflow menu icons
    By RCM in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 16, 2015, 2:28 PM
  2. [CLOSED] Update SplitButton menu on DirectEvent?
    By rthiney in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 07, 2013, 4:10 AM
  3. [CLOSED] Updating the Overflow Menu
    By musher in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 25, 2012, 2:40 PM
  4. [CLOSED] Splitbutton with Menu - Make the menu expand upwards?
    By rbarr in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 02, 2011, 1:18 PM
  5. [CLOSED] Images in SplitButton Menu off
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 01, 2010, 5:50 PM

Posting Permissions