View Full Version : Ext.ux.TabURL

18 Aug 2009, 5:36 AM
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.

* 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>',
tt.disableFormats = true;
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:

var tabpanel = new Ext.TabPanel({
plugins: [ Ext.ux.TabURL ]

title: 'Debugger',
tabURL: '?module=debugger'

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 B)

19 Aug 2009, 10:54 PM
The thing i was looking for, many thanks!