1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    4
    Vote Rating
    0
    clewis is on a distinguished road

      0  

    Default Tab on hover popup menu

    Tab on hover popup menu


    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]);
                            }
                        }
                    });
                }
            }
        });
    });
    Attached Images

  2. #2
    Sencha User brittongr's Avatar
    Join Date
    Jun 2007
    Location
    Panama
    Posts
    109
    Vote Rating
    3
    brittongr is on a distinguished road

      0  

    Default


    Thanks for sharing...
    Greivin Britton

    My Extensions:
    Ext.ux.NumericField: Number field with support for currencySymbol, thousand separator, international...
    Ext.ux.PagerSizeSelector: A plugin that allows the change page size with just one click.
    Ext.ux.FieldAccess: A plugin to let the user know which fields are editable.

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    1
    Vote Rating
    0
    ltai701 is on a distinguished road

      0  

    Default


    Seems good

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi