What's New?

[CLOSED] TabPanel Hover

  1. #1
    Nov 09, 2010, 9:22 AM

    [CLOSED] TabPanel Hover

    Hi,

    I have created a tab menu for one of my pages. My client has requested that rather than clicking the expand button on the tab to open the sub menu (menu1), he would like to hover over it. Is there a way this can be done?

    I have included the sample code below.

            <ext:TabPanel ID="_tabPanel1" runat="server">
            <Items>
                <ext:Panel  
                    ID="_tab1"
                    runat="server" 
                    Title="Tab 1">
                    <TabMenu>
                        <ext:Menu ID="_menu1" runat="server">
                            <Items>
                                <ext:MenuItem ID="_menu1Item1" runat="server" Text="Menu Item 1" />
                                <ext:MenuItem ID="_menu1Item2" runat="server" Text="Menu Item 2" />
                                <ext:MenuItem ID="_menu1Item3" runat="server" Text="Menu Item 3" />
                                <ext:MenuItem ID="_menu1Item4" runat="server" Text="Menu Item 4" />
                            </Items>
                        </ext:Menu>
                    </TabMenu> 
                </ext:Panel>
            <Items>
        <ext:/TabPanel>
    Many Thanks

    Lee
    Last edited by geoffrey.mcgill; Nov 09, 2010 at 5:18 PM. Reason: [CLOSED]
  2. #2
    Nov 09, 2010, 9:53 AM
    Hi,

    Please set the MenuItem's HideOnClick property to false.

    Example
    <ext:TabPanel runat="server">
    <Items>
        <ext:Panel runat="server" Title="Tab 1">
            <TabMenu>
                <ext:Menu runat="server">
                    <Defaults>
                        <ext:Parameter Name="HideOnClick" Value="false" Mode="Raw" />
                    </Defaults>
                    <Items>
                        <ext:MenuItem ID="_menu1Item1" runat="server" Text="Menu Item 1" />
                        <ext:MenuItem ID="_menu1Item2" runat="server" Text="Menu Item 2" />
                        <ext:MenuItem ID="_menu1Item3" runat="server" Text="Menu Item 3" />
                        <ext:MenuItem ID="_menu1Item4" runat="server" Text="Menu Item 4" />
                    </Items>
                </ext:Menu>
            </TabMenu>
        </ext:Panel>
    </Items>
</ext:TabPanel>
    There is the way to set it for all MenuItems. Sure, it's possible to set this for a separate MenuItem.

    Example
    <ext:MenuItem runat="server" Text="Menu Item 1" HideOnClick="false"/>
  3. #3
    Nov 09, 2010, 12:57 PM
    Hi,

    Please see the following sample
    <%@ 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></title>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:TabPanel ID="_tabPanel1" runat="server">
            <Items>
                <ext:Panel 
                    ID="_tab1"
                    runat="server"
                    Title="Tab 1">
                    <TabMenu>
                        <ext:Menu ID="_menu1" runat="server">
                            <Items>
                                <ext:MenuItem ID="_menu1Item1" runat="server" Text="Menu Item 1" />
                                <ext:MenuItem ID="_menu1Item2" runat="server" Text="Menu Item 2" />
                                <ext:MenuItem ID="_menu1Item3" runat="server" Text="Menu Item 3" />
                                <ext:MenuItem ID="_menu1Item4" runat="server" Text="Menu Item 4" />
                            </Items>
                        </ext:Menu>
                    </TabMenu> 
                    <Listeners>
                        <AfterRender Handler="this.menuEl.on('mouseenter', function(){this.tabMenu.show(this.menuEl)}, this);" />
                    </Listeners>
                </ext:Panel>
            </Items>
        </ext:TabPanel>
    </form>
</body>
</html>
  4. #4
    Nov 09, 2010, 1:15 PM
    Thanks Guys,

    Solution works, but if i have more than one panel then the panel has to be selected first before you can hover over the menu items. Is there a to solve this little pickle?

    Cheers

    Lee
  5. #5
    Nov 09, 2010, 4:45 PM
    Hi,

    Please see modified sample
    <%@ 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></title>
    
    <script type="text/javascript">
        var initMenu = function (tab) {
            tab.menuEl.on('mouseenter', function () {
                if (this.ownerCt.getActiveTab() == this) {
                    this.tabMenu.show(this.menuEl)
                }
            }, tab);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
         
        <ext:TabPanel ID="_tabPanel1" runat="server">
            <Items>
                <ext:Panel runat="server" Title="Tab 1">
                    <TabMenu>
                        <ext:Menu runat="server">
                            <Items>
                                <ext:MenuItem runat="server" Text="Menu Item 1" />
                                <ext:MenuItem runat="server" Text="Menu Item 2" />
                                <ext:MenuItem runat="server" Text="Menu Item 3" />
                                <ext:MenuItem runat="server" Text="Menu Item 4" />
                            </Items>
                        </ext:Menu>
                    </TabMenu> 
                    <Listeners>
                        <AfterRender Fn="initMenu" />
                    </Listeners>
                </ext:Panel>
                
                <ext:Panel runat="server" Title="Tab 2">
                    <TabMenu>
                        <ext:Menu runat="server">
                            <Items>
                                <ext:MenuItem  runat="server" Text="Menu Item 1" />
                                <ext:MenuItem  runat="server" Text="Menu Item 2" />
                                <ext:MenuItem  runat="server" Text="Menu Item 3" />
                                <ext:MenuItem  runat="server" Text="Menu Item 4" />
                            </Items>
                        </ext:Menu>
                    </TabMenu> 
                    <Listeners>
                        <AfterRender Fn="initMenu" />
                    </Listeners>
                </ext:Panel>
            </Items>
        </ext:TabPanel>
    </form>
</body>
</html>
    Last edited by geoffrey.mcgill; Nov 09, 2010 at 5:18 PM.
  6. #6
    Nov 12, 2010, 12:20 PM
    Hi Vladimir,

    your modified solution works, but it will only show the menu if its the active tab. I want to show the menu items when i hover over the tab, without it having to be the active tab.

    Lee
  7. #7
    Nov 12, 2010, 2:35 PM
    Hi,

    Please look at the example.

    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 initMenu = function(tab) {
            tab.menuEl.on('mouseenter', function() {
                this.tabMenu.show(this.menuEl)
            }, tab);
        };
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:TabPanel runat="server" DeferredRender="false">
        <Items>
            <ext:Panel runat="server" Title="Tab 1">
                <TabMenu>
                    <ext:Menu runat="server">
                        <Items>
                            <ext:MenuItem runat="server" Text="Menu Item 1" />
                            <ext:MenuItem runat="server" Text="Menu Item 2" />
                        </Items>
                    </ext:Menu>
                </TabMenu>
                <Listeners>
                    <AfterRender Fn="initMenu" />
                </Listeners>
            </ext:Panel>
            <ext:Panel runat="server" Title="Tab 2">
                <TabMenu>
                    <ext:Menu runat="server">
                        <Items>
                            <ext:MenuItem runat="server" Text="Menu Item 1" />
                            <ext:MenuItem runat="server" Text="Menu Item 2" />
                        </Items>
                    </ext:Menu>
                </TabMenu>
                <Listeners>
                    <AfterRender Fn="initMenu" />
                </Listeners>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Disable the hover selection on a TreePanel
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 17, 2012, 7:14 AM
  2. [CLOSED] gridpanel cell hover in IE6
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 02, 2012, 11:00 AM
  3. Grid Row hover Popup Box
    By ramtirthe.nr in forum 1.x Help
    Replies: 0
    Last Post: Sep 26, 2011, 1:58 PM
  4. Hover functionality
    By survik123 in forum 1.x Help
    Replies: 0
    Last Post: Sep 26, 2011, 1:42 PM
  5. Hover effect does not disappear
    By dbassett74 in forum Bugs
    Replies: 2
    Last Post: May 12, 2009, 5:32 PM

Posting Permissions