[CLOSED] Button menu is not hiding while mouseout.

  1. #1

    [CLOSED] Button menu is not hiding while mouseout.

    Hi,

    I have implemented menu in the button and also implemented button listener to show menu. In MouseOver listener the menu is showing and then mouse moves over to the menu, it remains open and if mouseleave from menu, it is hiding. The menu remain open if mouse over the button and leave from button without touching the menu (not move mouse over menu). The example code given below...

    If mouseout listener implement on button the menu is hiding while mouse out from button, it is not allowing to access menu.

    <script>
    var onAfterRender = function (menu, button) {
                menu.el.on(
                'mouseleave',
                function () {                
                    if (!button.lockHideMenu) {
                        button.hideMenu();
                    }
                },
                this,
                {
                    delay: 250
                });
                menu.el.on(
                'mouseenter',
                function () {                
                    button.lockHideMenu = true;
                    (function () {
                        button.lockHideMenu = false;
                    }).defer(300);
                });
            };
    </script>
    <ext:Button ID="btnNewLoan" runat="server" AnchorHorizontal="right" Text="Start New Loan"
                                                    Icon="Add">
                                                    <Menu>
                                                        <ext:Menu ID="Menu5" runat="server">
                                                            <Items>
                                                                <ext:MenuItem ID="MenuItem9" runat="server" Text="Start New Loan" Icon="Add">
                                                                    <DirectEvents>
                                                                        <Click OnEvent="btnStartNewLoan_Click">
                                                                        </Click>
                                                                    </DirectEvents>
                                                                </ext:MenuItem>
                                                                <ext:MenuItem ID="MenuItem10" runat="server" Text="Import Existing Loan" Icon="PageAttach">
                                                                    <DirectEvents>
                                                                        <Click OnEvent="winImportLoanOpen">
                                                                        </Click>
                                                                    </DirectEvents>
                                                                </ext:MenuItem>
                                                            </Items>
                                                            <Listeners>
                                                                <AfterRender Handler="onAfterRender(this, btnNewLoan);" />
                                                            </Listeners>
                                                        </ext:Menu>
                                                    </Menu>
                                                    <Listeners>
                                                        <MouseOver Handler="#{btnNewLoan}.showMenu();" />
                                                        <%--<MouseOut Handler="onButtonLeave(btnNewLoan);" />--%>
                                                    </Listeners>
                                                </ext:Button>
    Last edited by Daniil; Jul 25, 2012 at 1:07 AM. Reason: [CLOSED]
  2. #2
    Here is an example image that might also explain our issue Click image for larger version. 

Name:	menu example.png 
Views:	170 
Size:	23.6 KB 
ID:	4498
  3. #3
    Hi,

    I would try the following.

    1. Нide the Menu within MouseOut listener for the Button with some delay using the DelayedTask.
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext.util.DelayedTask

    2. Cancel that task within the MouseOver listener of the Menu.
  4. #4
    Hi Daniil,

    I will check this with setTimeout function in javascript. We can create one common variable and change that variable in menuenter and leave function and will check that variable value in setTimeout function, if no change in variable we can hide button menu.

    Quote Originally Posted by Daniil View Post
    Hi,

    I would try the following.

    1. Нide the Menu within MouseOut listener for the Button with some delay using the DelayedTask.
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext.util.DelayedTask

    2. Cancel that task within the MouseOver listener of the Menu.
  5. #5
    Yes, it is also a possible solution.

    Can we mark the thread as closed?
  6. #6
    Hi Daniil,

    This problem not yet resolved. The following example implemented and it is working fine with IE but not in Chrome and Firefox. Can you please check this and let me know which way the menu will work. We need menu should show when mouseover the button or menu items and hide mouse leave from button or menu items.

    
    <%@ 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">
    <script runat="server">
    
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script language="javascript" type="text/javascript">
            //var leaveFromMenu = true;
            var ctrl;
            var IntervalId;
    
            var onAfterRender = function (menu, button) {
                menu.el.on(
                'mouseleave',
                function () {
                    ctrl = button;
                    //leaveFromMenu = true;
                    if (!button.lockHideMenu) {
                        button.hideMenu();                    
                    }
                },
                this,
                {
                    delay: 250
                });
                menu.el.on(
                'mouseenter',
                function () {
                    ctrl = button;
                    //leaveFromMenu = false;
                    clearInterval(IntervalId);
                    button.lockHideMenu = true;
                    (function () {
                        button.lockHideMenu = false;
                    }).defer(300);
                });
            };
    
            var onButtonLeave = function (button) {
                ctrl = button;
                IntervalId = setInterval('checkHideMenu()', 1000);           
            }
    
            var onButtonEnter = function (button) {
                ctrl = button;
                if (IntervalId != null)
                    clearInterval(IntervalId);
                ctrl.showMenu();
            }
    
    
            function checkHideMenu() {
                //leaveFromMenu = true;
                if (ctrl != null)
                    ctrl.hideMenu();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Toolbar runat="server" ID="tbButtons">
            <Items>
                <ext:Button ID="btnTestOne" runat="server" AnchorHorizontal="left" Text="Test 1">
                    <Menu>
                        <ext:Menu runat="server" ID="Menu1">
                            <Items>
                                <ext:MenuItem ID="MenuItem1" Text="Item1">
                                </ext:MenuItem>
                                <ext:MenuItem ID="MenuItem2" Text="Item2">
                                </ext:MenuItem>
                            </Items>
                            <Listeners>
                                <AfterRender Handler="onAfterRender(this, btnTestOne);" />
                            </Listeners>
                        </ext:Menu>
                    </Menu>
                    <Listeners>
                        <%--<MouseOver Handler="#{btnTestOne}.showMenu();" />--%>
                        <MouseOver Handler="onButtonEnter(btnTestOne);" />
                        <MouseOut Handler="onButtonLeave(btnTestOne);" />
                    </Listeners>
                </ext:Button>
                <ext:ToolbarSeparator ID="sepDel" runat="server" />
                <ext:Button ID="btnTest2" runat="server" Text="Test 2" IconAlign="Left">
                    <Menu>
                        <ext:Menu runat="server" ID="mnuAddCondition">
                            <Items>
                                <ext:MenuItem ID="MenuItem3" Text="Item1">
                                </ext:MenuItem>
                                <ext:MenuItem ID="MenuItem4" Text="Item2">
                                </ext:MenuItem>
                                <ext:MenuItem ID="MenuItem5" Text="Item3">
                                </ext:MenuItem>
                                <ext:MenuItem ID="MenuItem6" Text="Item4">
                                </ext:MenuItem>
                            </Items>
                            <Listeners>
                                <AfterRender Handler="onAfterRender(this, btnTest2);" />
                            </Listeners>
                        </ext:Menu>
                    </Menu>
                    <Listeners>
                        <%--<MouseOver Handler="#{btnTest2}.showMenu();" />--%>
                        <MouseOver Handler="onButtonEnter(btnTest2);" />
                        <MouseOut Handler="onButtonLeave(btnTest2);" />
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:Toolbar>
        </form>
    </body>
    </html>
    Quote Originally Posted by Daniil View Post
    Yes, it is also a possible solution.

    Can we mark the thread as closed?
  7. #7
    Please use MouseEnter and MouseLeave events for the Button as well, instead of the MouseOver and MouseOut ones.

    So, please replace:
    <MouseOut Handler="onButtonLeave(btnTestOne);" />
    <MouseOver Handler="onButtonEnter(btnTestOne);" />
    with
    <AfterRender Handler="this.mon(this.el, 'mouseenter', onButtonEnter, this);
                          this.mon(this.el, 'mouseleave', onButtonLeave, this);" />
    and
    var onButtonLeave = function (button) {
        ctrl = button;
        IntervalId = setInterval('checkHideMenu()', 1000);          
    }
     
    var onButtonEnter = function (button) {
        ctrl = button;
        if (IntervalId != null)
            clearInterval(IntervalId);
        ctrl.showMenu();
    }
    with
    var onButtonLeave = function () {
        ctrl = this;
        IntervalId = setInterval('checkHideMenu()', 1000);           
    };
    
    var onButtonEnter = function () {
        ctrl = this;
        if (IntervalId != null)
            clearInterval(IntervalId);
        ctrl.showMenu();
    };

Similar Threads

  1. Replies: 1
    Last Post: Nov 30, 2011, 4:10 PM
  2. [CLOSED] Hiding Panel on Radio Button Click
    By CMA in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 01, 2010, 12:24 PM
  3. [CLOSED] Browse button does not disappear when hiding a FileUploadField
    By ShawnMS77 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 20, 2009, 4:00 PM
  4. Menu not hiding when clicking off
    By dbassett74 in forum Bugs
    Replies: 3
    Last Post: May 08, 2009, 4:23 PM
  5. [CLOSED] Button hiding error
    By sz_146 in forum 1.x Help
    Replies: 5
    Last Post: Oct 23, 2008, 7:50 AM

Tags for this Thread

Posting Permissions