Results 1 to 2 of 2

Thread: Ext.ux.TabURL

  1. #1
    Ext User Lukman's Avatar
    Join Date
    Jun 2009
    Location
    Malaysia
    Posts
    138
    Vote Rating
    0
      0  

    Default Ext.ux.TabURL

    This little plugin for TabPanel allows you to set each tab to have specific middle-click URL (for browsers that support middle-clicking hyperlinks to open in new tabs e.g. Firefox).

    Add this plugin into TabPanel's plugins config option and for each Panel that makes up the children of the TabPanel add tabURL: 'url here' config option.

    Code:
    /**
      * Ext.ux.TabURL - Adding URL to TabPanel for launching specific URL when tabs are middle-clicked (in browsers that support opening URL by middle-clicking)
      * @author  M.Lukman
      * @version 0.2
      */
    
    Ext.ux.TabURL = Ext.extend(Object, {
        init: function(tabpanel) {
            var tt = new Ext.Template(
                 '<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>',
                 '<a class="x-tab-right" {hrefurl} onclick="return false;"><em class="x-tab-left">',
                 '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
                 '</em></a></li>'
            );
            tt.disableFormats = true;
            tt.compile();
            tabpanel.itemTpl = tt;
            tabpanel.getTemplateArgs = function(item) {
                return Ext.apply({}, {
                    hrefurl: item.tabURL? 'href="'+item.tabURL+'"' : ''
                }, Ext.TabPanel.prototype.getTemplateArgs.call(tabpanel, item));
            }
        }
    });
    Ext.preg('taburl', Ext.ux.TabURL);
    Example usage:
    Code:
    var tabpanel = new Ext.TabPanel({
       plugins: [ Ext.ux.TabURL ]
    });
    
    tabpanel.add({
       title: 'Debugger',
       tabURL: '?module=debugger'
    });
    
    tabpanel.add({
       title: 'Google',
       tabURL: 'http://www.google.com'
    });
    Bonus: using this plugin will remove the default href="#" from the tabs that do not specify tabURL config option

  2. #2
    Ext User IHaveRead's Avatar
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
      0  

    Default

    The thing i was looking for, many thanks!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •