[CLOSED] Menu not collapsing

**cwolcott** · Mar 19, 2015, 2:54 AM

Curious as to why the menu is not collapsing when I move off of it? Here are the steps that I am performing.

Move the mouse over Menu 1. This causes the sub-menu to expand. (GOOD)
Move the mouse to the right over Menu 2. This causes Menu 1 (plus the sub-menu) to disappear, and Menu 2 and its sub-menu to expand. (GOOD)
Move the mouse up off of Menu 2. This causes Menu 2 (plus the sub-menu) to disappear. (GOOD)
-----
Move the mouse over Menu 1. This causes the sub-menu to expand. (GOOD)
Move the mouse down off of Menu 1 into the panel. Menu 1 (plus the sub-menu) are still expanded (WHY?)
Click on the panel. This causes Menu 1 (plus the sub-menu) to disappear. (OK)
-----
Move the mouse over Menu 1. This causes the sub-menu to expand. (GOOD)
Move the mouse down to Menu 1.2 and select it. This causes the sub-menu to disappear, but Menu 1 is still active. (WHY?)

Side Question: Is it normal for the sub-menu to display with a slight delay when selecting a main menu item or am I missing an option?

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
</script>
<!DOCTYPE html>

<html>
<head runat="server">
    <title>Menu Question</title>
    <style type="text/css">
        /* Menu body */
        .wsMenu .x-menu-body {
            background-color: #DEDEDE !important;
            background-color: #B9CDE5 !important;
            border: 0;
        }

        /* Menu items */
        .wsMenu .x-menu-item-link {
            padding-left: 6px;
            padding-right: 30px;
            line-height: 18px;
            font-weight: bold;
        }

        /* Menu mouseover item */
        .wsMenu .x-menu-item-active {
            border: 0 !important;
        }

            /* Menu mouseover item */
            .wsMenu .x-menu-item-active .x-menu-item-link {
                background-color: #FFFFFF !important;
                background-image: none;
            }

            /* Menu mouseover text */
            .wsMenu .x-menu-item-active .x-menu-item-text {
                color: #B22222 !important;
            }

        /* Menu arrow */
        .wsMenu .x-menu-item-arrow {
            display: none;
        }

        /* SubMenu body */
        .wsSubMenu .x-menu-body {
            background-color: #FFFFFF !important;
            border: 0;
        }

        /* SubMenu items */
        .wsSubMenu .x-menu-item-link {
            padding-left: 11px;
            line-height: 16px;
            font-weight: bold;
            display: block;
            background-color: #FFFFFF !important;
        }

        /* SubMenu mouseover item  */
        .wsSubMenu .x-menu-item-active {
            border: 0 !important;
        }

            /* SubMenu mouseover item */
            .wsSubMenu .x-menu-item-active .x-menu-item-link {
                background-color: #DEDEDE !important;
            }

            /* SubMenu mouseover text */
            .wsSubMenu .x-menu-item-active .x-menu-item-text {
                color: #B22222 !important;
                background-image: none;
            }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Window runat="server" Width="600" Height="150" Title="Menu Question">
        <LayoutConfig>
            <ext:HBoxLayoutConfig Align="Stretch" DefaultMargins="2 0" />
        </LayoutConfig>
        <Items>
            <ext:Panel runat="server" Header="false" Border="false" Height="23" Flex="1">
                <Items>
                    <ext:Menu ID="wsMainMenu" runat="server" Floating="false" Layout="HBoxLayout" ShowSeparator="false"
                        Cls="wsMenu" Border="false">
                        <Defaults>
                            <ext:Parameter Name="MenuAlign" Value="tl-bl?" Mode="Value" />
                        </Defaults>
                        <Items>
                            <ext:MenuItem runat="server" Text="Menu 1">
                                <Menu>
                                    <ext:Menu runat="server" Cls="wsSubMenu">
                                        <Items>
                                            <ext:MenuItem runat="server" Text="Menu 1.1"></ext:MenuItem>
                                            <ext:MenuItem runat="server" Text="Menu 1.2"></ext:MenuItem>
                                            <ext:MenuItem runat="server" Text="Menu 1.3"></ext:MenuItem>
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:MenuItem>
                            <ext:MenuItem runat="server" Text="Menu 2">
                                <Menu>
                                    <ext:Menu runat="server" Cls="wsSubMenu">
                                        <Items>
                                            <ext:MenuItem runat="server" Text="Menu 2.1"></ext:MenuItem>
                                            <ext:MenuItem runat="server" Text="Menu 2.2"></ext:MenuItem>
                                            <ext:MenuItem runat="server" Text="Menu 2.3"></ext:MenuItem>
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:MenuItem>
                        </Items>
                    </ext:Menu>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Window>
</body>
</html>

**Daniil** · Mar 19, 2015, 2:39 PM

Hi Chris,

It is related to an old bug that, unfortunately, is not fixed so far. At least, it ExtJS 4 and Ext.NET v2.
https://github.com/extnet/Ext.NET/issues/106

Seems this starts from ExtJS 3 / Ext.NET v1 and here is a related thread with a sample for Ext.NET v1:
http://forums.ext.net/showthread.php...ll=1#post89419

I think the solutions key points will be similar for Ext.NET v2. You might give it a try to adjust it for v2 and your scenario.

**cwolcott** · Mar 19, 2015, 6:27 PM

I followed the thread and it makes sense, but I am having issues implementing it into my example. I will keep trying this afternoon.

I looks like this is still an issue in v3 Toolbar -> Menu -> Horizontal_Menu

**Daniil** · Mar 20, 2015, 11:35 AM

This example should help.

Example

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <style type="text/css">
        /* Menu body */
        .wsMenu .x-menu-body {
            background-color: #DEDEDE !important;
            background-color: #B9CDE5 !important;
            border: 0;
        }

        /* Menu items */
        .wsMenu .x-menu-item-link {
            padding-left: 6px;
            padding-right: 30px;
            line-height: 18px;
            font-weight: bold;
        }

        /* Menu mouseover item */
        .wsMenu .x-menu-item-active {
            border: 0 !important;
        }

            /* Menu mouseover item */
            .wsMenu .x-menu-item-active .x-menu-item-link {
                background-color: #FFFFFF !important;
                background-image: none;
            }

            /* Menu mouseover text */
            .wsMenu .x-menu-item-active .x-menu-item-text {
                color: #B22222 !important;
            }

        /* Menu arrow */
        .wsMenu .x-menu-item-arrow {
            display: none;
        }

        /* SubMenu body */
        .wsSubMenu .x-menu-body {
            background-color: #FFFFFF !important;
            border: 0;
        }

        /* SubMenu items */
        .wsSubMenu .x-menu-item-link {
            padding-left: 11px;
            line-height: 16px;
            font-weight: bold;
            display: block;
            background-color: #FFFFFF !important;
        }

        /* SubMenu mouseover item  */
        .wsSubMenu .x-menu-item-active {
            border: 0 !important;
        }

            /* SubMenu mouseover item */
            .wsSubMenu .x-menu-item-active .x-menu-item-link {
                background-color: #DEDEDE !important;
            }

            /* SubMenu mouseover text */
            .wsSubMenu .x-menu-item-active .x-menu-item-text {
                color: #B22222 !important;
                background-image: none;
            }
    </style>

    <script>
        var onSubMenuMouseEnter = function () {
            this.allowHide = true;
        };

        var onSubMenuMouseLeave = function () {
            if (this.allowHide) {
                this.parentMenu.deactivateActiveItem();
            }
        };

        var onMenuItemAfterRender = function () {
            this.mon(this.el, "mouseenter", function () {
                this.menu.allowHide = false;
            }, this);
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Window
        runat="server"
        Width="600"
        Height="150"
        Title="Menu Question">
        <LayoutConfig>
            <ext:HBoxLayoutConfig Align="Stretch" DefaultMargins="2 0" />
        </LayoutConfig>
        <Items>
            <ext:Container runat="server" Height="23" Flex="1">
                <Items>
                    <ext:Menu
                        ID="wsMainMenu"
                        runat="server"
                        Floating="false"
                        Layout="HBoxLayout"
                        ShowSeparator="false"
                        Cls="wsMenu"
                        Border="false">
                        <Defaults>
                            <ext:Parameter Name="MenuAlign" Value="tl-bl?" Mode="Value" />
                        </Defaults>
                        <Items>
                            <ext:MenuItem ID="MenuItem1" runat="server" Text="Menu 1">
                                <Menu>
                                    <ext:Menu ID="SubMenu1" runat="server" Cls="wsSubMenu">
                                        <Items>
                                            <ext:MenuItem runat="server" Text="Menu 1.1" />
                                            <ext:MenuItem runat="server" Text="Menu 1.2" />
                                            <ext:MenuItem runat="server" Text="Menu 1.3" />
                                        </Items>
                                        <Listeners>
                                            <MouseEnter Fn="onSubMenuMouseEnter" />
                                            <MouseLeave Fn="onSubMenuMouseLeave" />
                                        </Listeners>
                                    </ext:Menu>
                                </Menu>
                                <Listeners>
                                    <AfterRender Fn="onMenuItemAfterRender" />
                                </Listeners>
                            </ext:MenuItem>

                            <ext:MenuItem runat="server" Text="Menu 2">
                                <Menu>
                                    <ext:Menu ID="SubMenu2" runat="server" Cls="wsSubMenu">
                                        <Items>
                                            <ext:MenuItem runat="server" Text="Menu 2.1" />
                                            <ext:MenuItem runat="server" Text="Menu 2.2" />
                                            <ext:MenuItem runat="server" Text="Menu 2.3" />
                                        </Items>
                                        <Listeners>
                                            <MouseEnter Fn="onSubMenuMouseEnter" />
                                            <MouseLeave Fn="onSubMenuMouseLeave" />
                                        </Listeners>
                                    </ext:Menu>
                                </Menu>
                                <Listeners>
                                    <AfterRender Fn="onMenuItemAfterRender" />
                                </Listeners>
                            </ext:MenuItem>
                        </Items>
                    </ext:Menu>
                </Items>
            </ext:Container>
        </Items>
    </ext:Window>
</body>
</html>

**cwolcott** · Mar 24, 2015, 12:28 AM

Thanks. Getting better for v2, but two additional issues.

If after moving onto Menu 1 I click the mouse the submenu disappers and does not show again unless I move off the menu and back on. I guess we should ignore the click on the menuItem if there is a submenu?
After moving off Menu 2 to the right the menu item is still active. Should we add a mouseleave to the menuItem after render (see below)?

        var onMenuItemAfterRender = function () {

            this.mon(this.el, "mouseenter", function () {
                this.menu.allowHide = false;
            }, this);
            this.mon(this.el, "mouseleave", function () {
                this.parentMenu.deactivateActiveItem();
            }, this);
        };

If I was a critic it looks a little clumsy closing the menu before the submenu (the timing is not smooth, like other sites where the menu and sub open and close without any delay), but at least it works now.

**Daniil** · Mar 24, 2015, 8:38 AM

1. Setting HideOnClick="false" for the MenuItems and stopping the MouseDown event on the menu items appear to help.

var onMenuItemAfterRender = function () {
    ...

    this.mon(this.el, "mousedown", function (e) {
        e.stopEvent();
    });
};

2. Yes, your solution appears to be working well.

3. Yes, it looks really clumsy. Setting MenuHideDelay="1" for the MenuItems helps.
http://docs.sencha.com/extjs/4.2.1/#...-menuHideDelay

Here is an updated example.

Example

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <style type="text/css">
        /* Menu body */
        .wsMenu .x-menu-body {
            background-color: #DEDEDE !important;
            background-color: #B9CDE5 !important;
            border: 0;
        }

        /* Menu items */
        .wsMenu .x-menu-item-link {
            padding-left: 6px;
            padding-right: 30px;
            line-height: 18px;
            font-weight: bold;
        }

        /* Menu mouseover item */
        .wsMenu .x-menu-item-active {
            border: 0 !important;
        }

            /* Menu mouseover item */
            .wsMenu .x-menu-item-active .x-menu-item-link {
                background-color: #FFFFFF !important;
                background-image: none;
            }

            /* Menu mouseover text */
            .wsMenu .x-menu-item-active .x-menu-item-text {
                color: #B22222 !important;
            }

        /* Menu arrow */
        .wsMenu .x-menu-item-arrow {
            display: none;
        }

        /* SubMenu body */
        .wsSubMenu .x-menu-body {
            background-color: #FFFFFF !important;
            border: 0;
        }

        /* SubMenu items */
        .wsSubMenu .x-menu-item-link {
            padding-left: 11px;
            line-height: 16px;
            font-weight: bold;
            display: block;
            background-color: #FFFFFF !important;
        }

        /* SubMenu mouseover item  */
        .wsSubMenu .x-menu-item-active {
            border: 0 !important;
        }

            /* SubMenu mouseover item */
            .wsSubMenu .x-menu-item-active .x-menu-item-link {
                background-color: #DEDEDE !important;
            }

            /* SubMenu mouseover text */
            .wsSubMenu .x-menu-item-active .x-menu-item-text {
                color: #B22222 !important;
                background-image: none;
            }
    </style>

    <script>
        var onSubMenuMouseEnter = function () {
            this.allowHide = true;
        };

        var onSubMenuMouseLeave = function () {
            if (this.allowHide) {
                this.parentMenu.deactivateActiveItem();
            }
        };

        var onMenuItemAfterRender = function () {
            this.mon(this.el, "mouseenter", function () {
                this.menu.allowHide = false;
            }, this);

            this.mon(this.el, "mousedown", function (e) {
                e.stopEvent();
            });

            this.mon(this.el, "mouseleave", function () {
                this.parentMenu.deactivateActiveItem();
            }, this);
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Window
        runat="server"
        Width="600"
        Height="150"
        Title="Menu Question">
        <LayoutConfig>
            <ext:HBoxLayoutConfig Align="Stretch" DefaultMargins="2 0" />
        </LayoutConfig>
        <Items>
            <ext:Container runat="server" Height="23" Flex="1">
                <Items>
                    <ext:Menu
                        ID="wsMainMenu"
                        runat="server"
                        Floating="false"
                        Layout="HBoxLayout"
                        ShowSeparator="false"
                        Cls="wsMenu"
                        Border="false">
                        <Defaults>
                            <ext:Parameter Name="MenuAlign" Value="tl-bl?" Mode="Value" />
                        </Defaults>
                        <Items>
                            <ext:MenuItem 
                                runat="server" 
                                Text="Menu 1" 
                                HideOnClick="false" 
                                MenuHideDelay="1">
                                <Menu>
                                    <ext:Menu ID="SubMenu1" runat="server" Cls="wsSubMenu">
                                        <Items>
                                            <ext:MenuItem runat="server" Text="Menu 1.1" />
                                            <ext:MenuItem runat="server" Text="Menu 1.2" />
                                            <ext:MenuItem runat="server" Text="Menu 1.3" />
                                        </Items>
                                        <Listeners>
                                            <MouseEnter Fn="onSubMenuMouseEnter" />
                                            <MouseLeave Fn="onSubMenuMouseLeave" />
                                        </Listeners>
                                    </ext:Menu>
                                </Menu>
                                <Listeners>
                                    <AfterRender Fn="onMenuItemAfterRender" />
                                </Listeners>
                            </ext:MenuItem>

                            <ext:MenuItem 
                                runat="server" 
                                Text="Menu 2" 
                                HideOnClick="false" 
                                MenuHideDelay="1">
                                <Menu>
                                    <ext:Menu ID="SubMenu2" runat="server" Cls="wsSubMenu">
                                        <Items>
                                            <ext:MenuItem runat="server" Text="Menu 2.1" />
                                            <ext:MenuItem runat="server" Text="Menu 2.2" />
                                            <ext:MenuItem runat="server" Text="Menu 2.3" />
                                        </Items>
                                        <Listeners>
                                            <MouseEnter Fn="onSubMenuMouseEnter" />
                                            <MouseLeave Fn="onSubMenuMouseLeave" />
                                        </Listeners>
                                    </ext:Menu>
                                </Menu>
                                <Listeners>
                                    <AfterRender Fn="onMenuItemAfterRender" />
                                </Listeners>
                            </ext:MenuItem>
                        </Items>
                    </ext:Menu>
                </Items>
            </ext:Container>
        </Items>
    </ext:Window>
</body>
</html>

**cwolcott** · Mar 24, 2015, 11:52 AM

Thank you for the additional suggestions to smooth the transitions (Sencha default is 200).

3. Yes, it looks really clumsy. Setting MenuHideDelay="1" for the MenuItems helps.
http://docs.sencha.com/extjs/4.2.1/#...-menuHideDelay

I also added MenuExpandDelay="1" to the MenuItems to show the meneItem and shubMenu at the same time.

I decided to test this under IE7/IE8 and everything looks great except for the MouseLeave listener that I added to try and take care of moving off of the far right menuItem. In IE7/IE8 moving between the MenuItem and submenu there is flickering, but if I remove the listener everything is smooth again.

**Daniil** · Mar 25, 2015, 10:41 AM

There is probably some space between the MenuItem and its Menu. So, the MouseLeave event fires for the MenuItem first, but the MouseEnter/MouseOver event doesn't fire for its Menu yet. I was able to reproduce the same in other browsers as well, just it happens more rarely.

Maybe, change the MouseLeave handle to this one?

this.mon(this.el, "mouseleave", function (e) {
    if (e.getX() >= (this.el.getX() + this.el.getWidth())) {
        this.parentMenu.deactivateActiveItem();
    }
}, this);

That should hide the menu only if the mouse is moving out over the right edge.

**cwolcott** · Mar 25, 2015, 1:26 PM

Agreed with your statement. That does help a little bit, but IE7 and IE8 still present a problem. The only reason I am concerned about the flicker is that 41% of our users still visit the website using IE7/8.

Using the example above and looking at it in IE11 Document Mode: 7 or 8 the submenu has a shadow box around it several pixels thick (this is also true using IE9 Browser Mode: 7 or 8 and Document Mode: 7 or 8). Not sure if this is causing the issue, but once the mouse touches the first pixel on the shadow box the menuItem disappears and the submenu is not shown yet. If you continue to move down another pixel or two both items show up again, thus causing the flicker.

Do you see the same issue as below?

Click image for larger version.

Name: MenuCollapseCompare.png
Views: 3
Size: 28.5 KB
ID: 23001

**Daniil** · Mar 26, 2015, 10:42 AM

A nice finding! Please try Shadow="false" for the Menus.

Thread: [CLOSED] Menu not collapsing

Thread Tools

Search Thread

Display

[CLOSED] Menu not collapsing

Similar Threads

[CLOSED] Nodes in TreePanel dissapear after collapsing another node

[CLOSED] Collapsing a tab panel when all tabs are hidden

[CLOSED] Image quality loss when collapsing a panel

Panel isn't collapsing after dynamically add a fieldset

[CLOSED] Ext.EventManager is undefined when collapsing panel

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Menu not collapsing

[CLOSED] Menu not collapsing

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us