[CLOSED] Menu at MenuPanel is not hiding

  1. #1

    [CLOSED] Menu at MenuPanel is not hiding

    Hi,

    I have created menu and sub menus within MenuPanel. While mouse move over menu item it is showing sub menu (if item have sub menu) and move mouse over menu item in sub menu also showing sub menu (if sub menu item have sub menu), but once mouse leave from sub menu items it got struck. Please see the attachment.Click image for larger version. 

Name:	MenuNotHiding.PNG 
Views:	61 
Size:	14.4 KB 
ID:	4695

    I need the same functionality like in

    Navigation
    Last edited by Daniil; Sep 03, 2012 at 5:02 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by rnachman View Post
    I need the same functionality like in

    Navigation
    I think you should implement it by a similar way.
  3. #3
    Hi Daniil,

    I have tried to implement. In "Navigation" thread button control used, but here there is no button control. Instead of button here is "MenuPanel", while running it throwing error at "button.showMenu()" in following code...

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
        <script type="text/javascript">
            var onButtonAfterRender = function (button) {
                var el = button.getEl();
    
                button.mon(el, 'mouseenter', onButtonMouseEnter, button);
                button.mon(el, 'mouseleave', onButtonMouseLeave, button, { delay: 100 });
            };
    
            var onButtonMouseEnter = function () {
                var button = this;
    
                button.allowHideMenuOnMouseLeave++;
                button.showMenu();
            };
    
            var onButtonMouseLeave = function () {
                var button = this;
    
                if (--button.allowHideMenuOnMouseLeave === 0) {
                    button.hideMenu();
                }
            };
    
            var onMenuAfterRender = function (menu, button) {
                var el = menu.getEl(),
                    scope = { button: button, menu: menu };
    
                menu.mon(el, "mouseenter", onMenuMouseEnter, scope);
                menu.mon(el, "mouseleave", onMenuMouseLeave, scope, { delay: 100 });
            };
    
            var onMenuMouseEnter = function () {
                var button = this.button;
    
                button.allowHideMenuOnMouseLeave++;
                console.log("onMenuMouseEnter: " + this.menu.id);
            };
    
            var onMenuMouseLeave = function () {
                var button = this.button;
    
                console.log("onMenuMouseLeave: " + this.menu.id);
                if (--button.allowHideMenuOnMouseLeave === 0) {
                    button.hideMenu();
                }
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="vpReqFields" runat="server" Layout="border">
            <Items>
                <ext:Panel ID="pnlLeftCtrls" runat="server" Region="Center" Layout="Accordion" Border="false">
                    <Items>
                        <ext:Panel ID="pnlCompanyAdmin" runat="server" Title="Title 1" Border="false">
                            <Items>
                                <ext:MenuPanel ID="Button1" runat="server" Text="Menu 1" Flex="1">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="allowHideMenuOnMouseLeave" Value="0" Mode="Raw" />
                                    </CustomConfig>
                                    <ext:Menu ID="Menu1" runat="server">
                                        <Items>
                                            <ext:MenuItem ID="MenuItem1" runat="server" Text="Item 1" />
                                            <ext:MenuItem ID="MenuItem2" runat="server" Text="Sub Menu">
                                                <Menu>
                                                    <ext:Menu ID="Menu2" runat="server">
                                                        <Items>
                                                            <ext:MenuItem ID="MenuItem3" runat="server" Text="Item 1" />
                                                            <ext:MenuItem ID="MenuItem4" runat="server" Text="Item 2" />
                                                        </Items>
                                                        <Listeners>
                                                            <AfterRender Handler="onMenuAfterRender(this, Button1);" />
                                                        </Listeners>
                                                    </ext:Menu>
                                                </Menu>
                                            </ext:MenuItem>
                                        </Items>
                                        <Listeners>
                                            <AfterRender Handler="onMenuAfterRender(this, Button1);" />
                                        </Listeners>
                                    </ext:Menu>
                                    <Listeners>
                                        <AfterRender Fn="onButtonAfterRender" />
                                    </Listeners>
                                </ext:MenuPanel>
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="pnlLoanAdmin" runat="server" Title="Title 2" Border="false">
                            <Items>
                                <ext:MenuPanel ID="Button2" runat="server" Text="Menu 2" Flex="1">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="allowHideMenuOnMouseLeave" Value="0" Mode="Raw" />
                                    </CustomConfig>
                                    <ext:Menu ID="Menu3" runat="server">
                                        <Items>
                                            <ext:MenuItem ID="MenuItem5" runat="server" Text="Item 1" />
                                            <ext:MenuItem ID="MenuItem6" runat="server" Text="Sub Menu">
                                                <Menu>
                                                    <ext:Menu ID="Menu4" runat="server">
                                                        <Items>
                                                            <ext:MenuItem ID="MenuItem7" runat="server" Text="Item 1" />
                                                            <ext:MenuItem ID="MenuItem8" runat="server" Text="Item 2" />
                                                        </Items>
                                                        <Listeners>
                                                            <AfterRender Handler="onMenuAfterRender(this, Button2);" />
                                                        </Listeners>
                                                    </ext:Menu>
                                                </Menu>
                                            </ext:MenuItem>
                                        </Items>
                                        <Listeners>
                                            <AfterRender Handler="onMenuAfterRender(this, Button2);" />
                                        </Listeners>
                                    </ext:Menu>
                                    <Listeners>
                                        <AfterRender Fn="onButtonAfterRender" />
                                    </Listeners>
                                </ext:MenuPanel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
  4. #4
    I can't see any MenuItems running the sample. Even if I remove all JavaScript.
  5. #5
    Hi Daniil,

    Here is the code completely without javascript. Please add javascript wherever is required to make the functionality work properly.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
        <script type="text/javascript">
            var onButtonAfterRender = function (button) {
                var el = button.getEl();
    
                button.mon(el, 'mouseenter', onButtonMouseEnter, button);
                button.mon(el, 'mouseleave', onButtonMouseLeave, button, { delay: 100 });
            };
    
            var onButtonMouseEnter = function () {
                var button = this;
    
                button.allowHideMenuOnMouseLeave++;
                button.showMenu();
            };
    
            var onButtonMouseLeave = function () {
                var button = this;
    
                if (--button.allowHideMenuOnMouseLeave === 0) {
                    button.hideMenu();
                }
            };
    
            var onMenuAfterRender = function (menu, button) {
                var el = menu.getEl(),
                    scope = { button: button, menu: menu };
    
                menu.mon(el, "mouseenter", onMenuMouseEnter, scope);
                menu.mon(el, "mouseleave", onMenuMouseLeave, scope, { delay: 100 });
            };
    
            var onMenuMouseEnter = function () {
                var button = this.button;
    
                button.allowHideMenuOnMouseLeave++;
                console.log("onMenuMouseEnter: " + this.menu.id);
            };
    
            var onMenuMouseLeave = function () {
                var button = this.button;
    
                console.log("onMenuMouseLeave: " + this.menu.id);
                if (--button.allowHideMenuOnMouseLeave === 0) {
                    button.hideMenu();
                }
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="border">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Collapsible="true" Region="West"
                    Width="220" Split="true" Border="true" Title="Site Administration" BodyStyle="background-color:#d9d9d9"
                    Layout="Border">
                    <Items>
                        <ext:Panel ID="Panel2" runat="server" Region="Center" Layout="Accordion" Border="false">
                            <Items>
                                <ext:Panel ID="Panel3" runat="server" Title="Title 1" Border="false"
                                    Layout="Border">
                                    <Items>
                                        <ext:MenuPanel ID="pnlCompanyMenuMain" runat="server" Region="Center" Border="false">
                                            <Menu ID="mnuCompanyMain" runat="server">
                                                <Items>
                                                    <ext:MenuItem ID="MenuItem16" runat="server" Text="Title 1_1" Icon="ArrowRight">
                                                        <Menu>
                                                            <ext:Menu ID="Menu8" runat="server">
                                                                <Items>
                                                                    <ext:MenuItem runat="server" Text="Title 1_1_1" ID="mnuitem1" Icon="ArrowRight">
                                                                    </ext:MenuItem>
                                                                    <ext:MenuSeparator />
                                                                    <ext:MenuItem runat="server" Text="Title 1_1_2" ID="mnuitem2" Icon="ArrowRight">
                                                                    </ext:MenuItem>
                                                                    <ext:MenuSeparator />
                                                                </Items>
                                                            </ext:Menu>
                                                        </Menu>
                                                    </ext:MenuItem>
                                                    <ext:MenuSeparator />
                                                    <ext:MenuItem runat="server" Text="Title 1_2" ID="MenuItem15" Icon="ArrowRight">
                                                    </ext:MenuItem>
                                                    <ext:MenuSeparator />
                                                </Items>
                                            </Menu>
                                        </ext:MenuPanel>
                                    </Items>
                                </ext:Panel>
                                <ext:Panel ID="Panel4" runat="server" Title="Title 2" Border="false"
                                    Layout="Border">
                                    <Items>
                                        <ext:MenuPanel ID="pnlLoanMenuMain" runat="server" Region="Center" Border="false">
                                            <Menu ID="mnuLoanAdmin" runat="server">
                                                <Items>
                                                    <ext:MenuItem ID="MenuItem20" runat="server" Text="Title 2_1" Icon="ArrowRight">
                                                        <Menu>
                                                            <ext:Menu ID="Menu9" runat="server">
                                                                <Items>
                                                                    <ext:MenuItem ID="MenuItem9" runat="server" Text="Title 2_1_1" Icon="ArrowRight">
                                                                        <Menu>
                                                                            <ext:Menu ID="Menu5" runat="server">
                                                                                <Items>
                                                                                    <ext:MenuItem runat="server" Text="Title 2_1_1_1" ID="mnuItemProcessingStatuses"
                                                                                        Icon="ArrowRight">
                                                                                    </ext:MenuItem>
                                                                                    <ext:MenuSeparator />
                                                                                    <ext:MenuItem runat="server" Text="Title 2_1_1_2" ID="MenuItem10" Icon="ArrowRight">
                                                                                    </ext:MenuItem>
                                                                                    <ext:MenuSeparator />
                                                                                </Items>
                                                                            </ext:Menu>
                                                                        </Menu>
                                                                    </ext:MenuItem>
                                                                    <ext:MenuSeparator />
                                                                    <ext:MenuItem ID="MenuItem21" runat="server" Text="Title 2_1_2" Icon="ArrowRight">
                                                                        <Menu>
                                                                            <ext:Menu ID="Menu10" runat="server">
                                                                                <Items>
                                                                                    <ext:MenuItem runat="server" Text="Title 2_1_2_1" ID="mnuItemMortgageTypes" Icon="ArrowRight">
                                                                                    </ext:MenuItem>
                                                                                    <ext:MenuSeparator />
                                                                                    <ext:MenuItem runat="server" Text="Title 2_1_2_2" ID="mnuItemLoanPurpose" Icon="ArrowRight">
                                                                                    </ext:MenuItem>
                                                                                    <ext:MenuSeparator />
                                                                                    <ext:MenuItem runat="server" Text="Title 2_1_2_3" ID="mnuItemLoanNumbers"
                                                                                        Icon="ArrowRight">
                                                                                    </ext:MenuItem>
                                                                                    <ext:MenuSeparator />
                                                                                </Items>
                                                                            </ext:Menu>
                                                                        </Menu>
                                                                    </ext:MenuItem>
                                                                    <ext:MenuSeparator />
                                                                    <ext:MenuItem runat="server" Text="Title 2_1_3" ID="mnuItemRequiredFields"
                                                                        Icon="ArrowRight">
                                                                    </ext:MenuItem>
                                                                    <ext:MenuSeparator />
                                                                </Items>
                                                            </ext:Menu>
                                                        </Menu>
                                                    </ext:MenuItem>
                                                    <ext:MenuSeparator />
                                                    <ext:MenuItem ID="MenuItem19" runat="server" Text="Title 2_2" Icon="ArrowRight">                                                    
                                                    </ext:MenuItem>
                                                    <ext:MenuSeparator />                                            
                                                </Items>
                                            </Menu>
                                        </ext:MenuPanel>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel5" runat="server" Region="Center" Layout="Border" Border="false"
                    Padding="0" MonitorResize="true">
                    <Items>
                        <ext:TabPanel ID="tabSections" runat="server" Title="TabPanel"
                            EnableTabScroll="true" Region="Center">                        
                            <Items>                            
                            </Items>
                        </ext:TabPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>    
    </body>
    </html>
    Quote Originally Posted by Daniil View Post
    I can't see any MenuItems running the sample. Even if I remove all JavaScript.
  6. #6
    Here you are.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var onMenuAfterRender = function (menu, parentMenu) {
                var el = menu.getEl(),
                    scope = parentMenu;
    
                menu.mon(el, "mouseenter", onMenuMouseEnter, scope);
                menu.mon(el, "mouseleave", onMenuMouseLeave, scope, { delay: 100 });
            };
    
            var onMenuMouseEnter = function () {
                var parentMenu = this;
    
                parentMenu.allowHideMenuOnMouseLeave++;
            };
    
            var onMenuMouseLeave = function () {
                var parentMenu = this;
    
                if (--parentMenu.allowHideMenuOnMouseLeave === 0) {
                    parentMenu.hide();
                }
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="border">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Region="West" 
                    Width="200" 
                    Title="Accordion" 
                    Layout="Accordion">
                    <Items>
                        <ext:MenuPanel runat="server" Title="MenuPanel2">
                            <Menu ID="Menu2" runat="server">
                                <CustomConfig>
                                    <ext:ConfigItem Name="allowHideMenuOnMouseLeave" Value="0" Mode="Raw" />
                                </CustomConfig>
                                <Items>
                                    <ext:MenuItem runat="server" Text="Item 1" Icon="ArrowRight">
                                        <Menu>
                                            <ext:Menu runat="server">
                                                <Items>
                                                    <ext:MenuItem runat="server" Text="Item 1.1" Icon="Accept" />
                                                    <ext:MenuItem runat="server" Text="Item 1.2" Icon="ArrowRight">
                                                        <Menu>
                                                            <ext:Menu runat="server">
                                                                <Items>
                                                                    <ext:MenuItem runat="server" Text="Item 1.2.1" Icon="Accept" />
                                                                    <ext:MenuItem runat="server" Text="Item 1.2.2" Icon="Accept" />
                                                                </Items>
                                                                <Listeners>
                                                                    <AfterRender Handler="onMenuAfterRender(this, Menu2);" />
                                                                </Listeners>
                                                            </ext:Menu>
                                                        </Menu>
                                                    </ext:MenuItem>
                                                </Items>
                                                <Listeners>
                                                    <AfterRender Handler="onMenuAfterRender(this, Menu2);" />
                                                </Listeners>
                                            </ext:Menu>
                                        </Menu>
                                    </ext:MenuItem>
                                    <ext:MenuItem runat="server" Text="Item 2" Icon="Accept" />
                                </Items>
                                <Listeners>
                                    <AfterRender Handler="onMenuAfterRender(this, this);" />
                                </Listeners>
                            </Menu>
                        </ext:MenuPanel>
                        <ext:MenuPanel runat="server" Title="MenuPanel1">
                            <Menu ID="Menu1" runat="server">
                                <CustomConfig>
                                    <ext:ConfigItem Name="allowHideMenuOnMouseLeave" Value="0" Mode="Raw" />
                                </CustomConfig>
                                <Items>
                                    <ext:MenuItem runat="server" Text="Item 1" Icon="ArrowRight">
                                        <Menu>
                                            <ext:Menu runat="server">
                                                <Items>
                                                    <ext:MenuItem runat="server" Text="Item 1.1" Icon="Accept" />
                                                    <ext:MenuItem runat="server" Text="Item 1.2" Icon="Accept" />
                                                </Items>
                                                <Listeners>
                                                    <AfterRender Handler="onMenuAfterRender(this, Menu1);" />
                                                </Listeners>
                                            </ext:Menu>
                                        </Menu>
                                    </ext:MenuItem>
                                    <ext:MenuItem runat="server" Text="Item 2" Icon="Accept" />
                                </Items>
                                <Listeners>
                                    <AfterRender Handler="onMenuAfterRender(this, this);" />
                                </Listeners>
                            </Menu>
                        </ext:MenuPanel>                    
                    </Items>
                </ext:Panel>
                <ext:Panel runat="server" Region="Center" Title="Center" />
            </Items>
        </ext:Viewport>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Button menu is not hiding while mouseout.
    By rnachman in forum 1.x Premium Help
    Replies: 6
    Last Post: Jul 30, 2012, 5:50 PM
  2. Replies: 1
    Last Post: Nov 30, 2011, 4:10 PM
  3. [CLOSED] How to use Menu or MenuPanel with big icons?
    By flormariafr in forum 1.x Premium Help
    Replies: 4
    Last Post: Jan 31, 2010, 5:42 AM
  4. Menu not disappearing when clicking in MenuPanel
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: May 30, 2009, 11:17 PM
  5. Menu not hiding when clicking off
    By dbassett74 in forum Bugs
    Replies: 3
    Last Post: May 08, 2009, 4:23 PM

Tags for this Thread

Posting Permissions