Tab on hover popup menu

**clewis** · 15 May 2009 10:29 AM

One of my projects required adding a context menu while the user hovered over an inactive tab. The particular use case for my scenario was to allow the user the opportunity to select the tab content before actually changing to it, without using a treeview control (client forbade it).

During my research, I noticed a few posts from people asking for similar functionality, so I thought I would share my solution for any who may find it useful.

TabMenu.html:

Code:

<!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>
    <title>Tab Menu Example</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript" src="TabMenu.js"></script>
</head>
<body>
    <h1>Tabs with on-hover menu</h1>
</body>
</html>

TabMenu.js:

Code:

//You cannot attach mouse events directly to a TabPanel. They must instead be attached to the underlying strip component.
//Since this is a private object, an override must be used to expose it.
Ext.override(Ext.TabPanel, {
    getStrip: function() {
        return this.strip;        
    }
});

Ext.onReady(function(){
    // The tab panel
    var tabs = new Ext.TabPanel({
        renderTo: document.body,
        activeTab: 0,
        width:600,
        height:250,
        frame: true,
        items: [
            {
                title: "Tab 2",
                html: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.",
                menu: new Ext.menu.Menu({
                    items: [
                        {text: "Menu Item 1"},
                        {text: "Menu Item 2"},
                        {text: "Menu Item 3"}
                    ],
                    listeners: {
                        itemclick: function(baseItem, e) {
                            var tab = baseItem.parentMenu.parentTab;

                            //do stuff here                            

                            //Hide menu and make this the active tab 
                            this.hide(); 
                            tab.ownerCt.setActiveTab(tab);
                        }
                    }
                }) 
            },{
                title: "Tab 2",
                html: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.",
                menu: new Ext.menu.Menu({
                    items: [
                        {text: "Menu Item 1"},
                        {text: "Menu Item 2"},
                        {text: "Menu Item 3"}
                    ],
                    listeners: {
                        itemclick: function(baseItem, e) {
                            var tab = baseItem.parentMenu.parentTab;

                            //do stuff here                            

                            //Hide menu and make this the active tab 
                            this.hide(); 
                            tab.ownerCt.setActiveTab(tab);
                        }
                    }
                }) 
            }
        ],
        listeners: {
            render: function(){
                //retrieve the underlying strip component and attach the mouseover event to that
                var strip = this.getStrip();
                strip.on({
                    "mouseover": function(e, t){
                        //Hide any menus that may be on the screen
                        Ext.menu.MenuMgr.hideAll();
                        //Determine which tab the mouse is currently over
                        var tab = tabs.findTargets(e);
                        //Only pop the menu up if this isnt the current tab and the tab has a menu
                        if (!tab.close && tab.item && tab.item != tabs.activeTab && tab.item.menu && !tab.item.menu.isVisible()) {
                            //Get the tab measurements
                            var rect = tab.el.getBoundingClientRect();
                            //force the menu association to the tab here since there is scope issues in the definition
                            //im sure there is a better way to do this...
                            tab.item.menu.parentTab = tab.item;
                            //Display the menu directly below the tab
                            tab.item.menu.showAt([rect.left, rect.bottom]);
                        }
                    }
                });
            }
        }
    });
});

**brittongr** · 17 Dec 2011 11:51 AM

Thanks for sharing...

**ltai701** · 21 Dec 2011 7:19 AM

Seems good

Tab on hover popup menu

Thread Tools

Search Thread

Display

Tab on hover popup menu

Tab on hover popup menu