[OPEN] [#1617] [4.7.1] Button overflow menu - set icon class returns error

  1. #1

    [OPEN] [#1617] [4.7.1] Button overflow menu - set icon class returns error

    Hello support team,
    when the window is wide enough to display the button, everything works well. However, if the window is shrunk, I get an error this.getIconCls is not a function when clicking an overflow menu item:

    @{
        Layout = null;
        var X = Html.X();
    }
    
    @(Html.X().ResourceManager())
    
    @(
        X.Window().Width(200).Height(180).DockedItems(
            X.Toolbar()
                .Border(false)
                .Dock(Dock.Top)
                .EnableOverflow(true)
                .Items(
                    X.ButtonGroup()
                        .Title("Remove")
                        .Items(
                            X.Button()
                            .Text("Active")
                            .OverflowText("Active")
                            .IconCls("#BulletCross")
                            .Scale(ButtonScale.Large)
                            .EnableToggle(true)
                            .OnClientClick("this.setIconCls(this.pressed ? '#BulletTick' : '#BulletCross');")
                        )
                )
        )                                                                                                                                          
    )                                                                                                                                              )
    The same error keeps occurring even if the window is enlarged to the original size.

    An overflow menu item icon should correspond with the button icon.

    Is there any workaround available? Thank you.

    Dan
  2. #2
    Hello Dan!

    For one, I can say that the menu component from the overflow menu can't be the same component of the button, so that would be natural to lose one setting or another.

    My first thought about the matter is, you should find what's available for the component when it is within the overflow menu and make the right call.

    But the property should show back again when you expand the component. This might suggest it is permanently losing some of its settings thru the moves around.

    I will take a look on it and get back to you soon.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabrício,
    thank you for the quick reply. You are right, and what you say is visible and clear to me. I've reported it rather as a bug because the button and the overflow menu look like linked together (they share the icon, text...) and should behave correctly in this situation as well.

    Btw, handling the button seems to be correct. When you toggle the status in the menu, the correct status is then also displayed on the button (but it does not work vice versa). So it looks more like a little inaccuracy in the code.

    Thank you for assistance and all your effort.

    Dan
  4. #4
    Hello again, Dan!

    Thanks for the follow-up, sorry if our first response didn't really add anything to the matter. In fact, after reviewing the sample test case you provided, the answer was not really quite accurate, and the code you were using to switch the icon should be working even when the button became a menu's check item.

    For some reason, Ext.menu.Item class does not have an implementation a fix from Ext.NET related to this component relied upon, and that's what's breaking the case.

    As a workaround to have your code working right away, just wrapping a simple implementation of the missing method will do. For the actual Ext.NET review in the fix, we'll just have to stop relying on that method, because it is not pertaining to the official documentation on the Ext JS class.

    That said, all you have to do is add this script block to your page and have it working as intended:

    <script type="text/javascript">
        Ext.override(Ext.menu.Item, {
            getIconCls: function () {
                return this.iconCls;
            }
        });
    </script>
    As for another issue, the fact it stops working when you re-expand the window, dismissing the overflow menu, is that the now drawn "doppel" of the button needs to keep in sync with it, so its code keep being called when the button is switched -- as the original button's code is called when the overflow menu is shown, so that it's matching the check menu item state when the overflow menu is dismissed.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    A little addendum, we have logged this issue under #1612 in github; we'll post an update here as soon as the fix makes it to the Ext.NET sources.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hi Fabrício,
    thank you for a prompt reply and highly professional approach. Your solution works like a charm.

    Dan

Similar Threads

  1. Replies: 5
    Last Post: Aug 07, 2018, 7:41 PM
  2. Replies: 10
    Last Post: Feb 20, 2017, 2:51 PM
  3. [CLOSED] How to set Icon for a button in Javascript?
    By nhg_itd in forum 1.x Premium Help
    Replies: 2
    Last Post: Jun 07, 2012, 4:12 AM
  4. [CLOSED] When button click, open the menu of button
    By supera in forum 2.x Premium Help
    Replies: 2
    Last Post: Feb 22, 2012, 5:23 PM
  5. Button in Toobar Overflow Error
    By asphugo in forum 1.x Help
    Replies: 1
    Last Post: Dec 22, 2010, 8:00 AM

Posting Permissions