What's New?

[CLOSED] Change submenus to show on click instead of hover

  1. #1
    Sep 20, 2016, 9:08 AM

    [CLOSED] Change submenus to show on click instead of hover

    Hi,
    I have read this thread http://forums.ext.net/showthread.php...stead-of-hover .
    But in Ext.Net 3.x doesn't work.
    I need same thing.
    Please help me.
    Thank you.

    Jimmy
    Last edited by fabricio.murta; Jan 03, 2017 at 9:53 PM. Reason: no user feedback for 7+ days
  2. #2
    Sep 20, 2016, 9:11 PM
    Hello Jimmy!

    Simply set the desired submenus' MenuExpandDelay to something like 86400 and you should be good.

    If too much, you can just add a Defaults setting to the container enclosing the menus to make the high value the default of this setting on the menus.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Sep 29, 2016, 9:59 AM
    Hi Fabricio,
    If I use MenuExpandDelay in the iPad I can not see the menu.
    I need that it works on PC as on iPad.
    I have done a workaround but it is not perfect.

    Jimmy

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


<!DOCTYPE html>


<html>
<head runat="server">
    <title></title>


    <link href="/resources/css/examples.css" rel="stylesheet" />


    <style>
        .horizontal-menu .x-menu-item-link {
            line-height: 20px;
        }


        .horizontal-menu .x-menu-item-arrow
        {
            display:none;
        }
    </style>


    <script type="text/javascript">


        var showClickMenu = function (mnIt) {


            if (!Ext.os.is.Android && !Ext.os.is.iOS) {


                var x = mnIt.getX();
                var y = mnIt.getY();
                var altezza = mnIt.getHeight();


                mnIt.menu.showAt(x, (y + altezza));
            }


        }


    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />


    <br />


    <ext:Menu
        runat="server"
        Floating="false"
        Layout="HBoxLayout"
        ShowSeparator="false"
        Cls="horizontal-menu">
        <Defaults>
            <ext:Parameter Name="MenuAlign" Value="tl-bl?" Mode="Value" />
        </Defaults>
        <Items>
            <ext:MenuItem runat="server" Text="Item 1" Icon="BulletBlue">
                <Menu>
                    <ext:Menu runat="server">
                        <Items>
                            <ext:MenuItem Text="Item 1.1" />
                            <ext:MenuItem Text="Item 1.2" />
                        </Items>
                    </ext:Menu>
                </Menu>
                <Listeners>
                    <Click Handler="showClickMenu(this);" />
                </Listeners>
            </ext:MenuItem>
        </Items>
    </ext:Menu>
</body>
</html>
  4. #4
    Sep 30, 2016, 5:20 AM
    Hello Jimmy!

    Interesting, you are saying that setting a long delay, the tap event to expand the menu is not triggering at all?

    I have no iPad here at the moment to check this out, but if that's the case, that's pretty unexpected. Maybe a long tap on iPad triggers it? Probably this issue could be overcame by rebinding the menu expand listeners so that it captures what iPad treats as a "mouse over".

    So a check like you did in your example, but creating a specific listener for when iPad or, maybe, just setting the delay whenever the device is not an iPad!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Sep 30, 2016, 6:31 AM
    Hello again, Jimmy!

    What about this: add a click event to effectively trigger what would the "delay" do.

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

<!DOCTYPE html>

<html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager runat="server" />
                <ext:Button ID="TheButton" runat="server" Text="Menu">
                    <Menu>
                        <ext:Menu ID="Menu3" runat="server">
                            <Defaults>
                                <ext:Parameter Name="menuExpandDelay" Value="60000" Mode="Raw" />
                            </Defaults>
                            <Items>
                                <ext:MenuItem ID="Menu1" runat="server" Text="Menu1">
                                    <Listeners>
                                        <Click Handler="item.expandMenu(e, 0);" />
                                    </Listeners>
                                    <Menu>
                                        <ext:Menu runat="server" >
                                            <Items>
                                                <ext:MenuItem ID="Item1" runat="server" Text="Item1" />
                                                <ext:MenuItem ID="Item2" runat="server" Text="Item2" />
                                                <ext:MenuItem ID="Item3" runat="server" Text="Item3" />
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:MenuItem>
                                <ext:MenuItem ID="Menu2" runat="server" Text="Menu2">
                                    <Listeners>
                                        <Click Handler="item.expandMenu(e, 0);" />
                                    </Listeners>
                                    <Menu>
                                        <ext:Menu runat="server">
                                            <Items>
                                                <ext:MenuItem ID="MenuItem1" runat="server" Text="Item1" />
                                                <ext:MenuItem ID="MenuItem2" runat="server" Text="Item2" />
                                                <ext:MenuItem ID="MenuItem3" runat="server" Text="Item3" />
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:MenuItem>
                            </Items>
                        </ext:Menu>
                    </Menu>
                </ext:Button>
            </div>
        </form>
    </body>
</html>
    I just tested here on chrome, using both android and iPad emulation and it worked fine!

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  6. #6
    Dec 02, 2016, 2:26 PM
    Hello Jimmy!

    Some time since we last replied to this thread and no feedback from you. Do you still need help on this issue?
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [FIXED] [#857] [3.2.1] Tooltips not showing on hover. You have to click them to see.
    By Fergus in forum Bugs
    Replies: 13
    Last Post: Aug 11, 2015, 3:02 PM
  2. [CLOSED] ToolTips : Image hover show ToolTips
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 17, 2015, 10:12 AM
  3. [CLOSED] Change submenus to show on click instead of hover
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 22, 2010, 6:08 AM
  4. Hover and double-click event on Panel?
    By dbassett74 in forum 1.x Help
    Replies: 2
    Last Post: May 07, 2009, 1:58 AM
  5. Show column hover, even if menu is diabled?
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: Apr 20, 2009, 12:20 PM

Posting Permissions