What's New?

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

  1. #1
    Oct 21, 2010, 7:30 PM

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

    Is there any way to do this?

    We're trying to make this compatible with the iPad (no hover).

    <ext:Button ID="TheButton" runat="server" Text="Menu">
    <Menu>
        <ext:Menu ID="Menu3" runat="server">
            <Items>
                <ext:MenuItem ID="Menu1" runat="server" Text="Menu1">
                    <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">
                    <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>
            </Items>
        </ext:Menu>
    </Menu>
</ext:Button>
    Last edited by Daniil; Oct 22, 2010 at 5:26 PM. Reason: [CLOSED]
  2. #2
    Oct 21, 2010, 8:08 PM
    Hi,

    There is no such option.
    Needs to override some logic of Ext.menu.Menu.

    I'd begin with the Menu's onClick and onMouseOver functions.
  3. #3
    Oct 22, 2010, 6:08 AM
    Hi,

    I can suggest you this solution with the following key points:
    1. Removes Menu's "mouseover", "mouseout" listeners. See AfterRender;
    2. Handling the MenuItem's Click event;
    3. Setting the MenuItem's HideOnClick property to false.

    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>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Button runat="server" Text="Menu">
        <Menu>
            <ext:Menu runat="server">
                <Listeners>
                    <AfterRender Handler="this.mun(this.ul, 'mouseover', this.onMouseOver, this);
                                          this.mun(this.ul, 'mouseout', this.onMouseOut, this);" />
                </Listeners>
                <Items>
                    <ext:MenuItem runat="server" Text="Menu1" HideOnClick="false">
                        <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>
                        <Listeners>
                            <Click Handler="this.menu.isVisible() ? this.hideMenu() : this.expandMenu();" />
                        </Listeners>
                    </ext:MenuItem>
                    <ext:MenuItem runat="server" Text="Menu2" HideOnClick="false">
                        <Menu>
                            <ext:Menu runat="server">
                                <Items>
                                    <ext:MenuItem ID="Item4" runat="server" Text="Item1" />
                                    <ext:MenuItem ID="Item5" runat="server" Text="Item2" />
                                    <ext:MenuItem ID="Item6" runat="server" Text="Item3" />
                                </Items>
                            </ext:Menu>
                        </Menu>
                        <Listeners>
                            <Click Handler="this.menu.isVisible() ? this.hideMenu() : this.expandMenu();" />
                        </Listeners>
                    </ext:MenuItem>
                </Items>
            </ext:Menu>
        </Menu>
    </ext:Button>
    </form>
</body>
</html>
    Last edited by Daniil; Dec 01, 2010 at 4:14 PM. Reason: Minor correction

Similar Threads

  1. Ext.Msg show is not working in first click of button
    By paddy in forum 1.x Help
    Replies: 11
    Last Post: Aug 08, 2012, 2:02 PM
  2. ext button click asp:gridiew footer row will be show
    By landerajshree in forum 1.x Help
    Replies: 5
    Last Post: Jul 03, 2012, 9:45 AM
  3. Show a panel on click event
    By CoolNoob in forum 1.x Help
    Replies: 2
    Last Post: Jan 01, 2010, 3:27 PM
  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

Tags for this Thread

Posting Permissions