PDA

View Full Version : Tab's middle-click URL



Lukman
26 Jun 2009, 6:07 PM
I found that, at least in a Firefox, if you middle-click on a Ext.TabPanel's tab, the browser will open up a new browser tab containing the current page. I want to make middle-clicking open up a page containing the contents of the TabPanel, but no worry about that since I know how to do it from server side but first the URL that is being fired must contain the information need for my server side script to trigger such a different action. Is there any config option that controls which URL will be opened in such a situation?

p/s: if you haven't discovered the middle-clicking trick yet, you can try it on tabs in ExtJS API page.

Lukman
12 Jul 2009, 5:58 AM
Any idea how to change the tab middle-click's URL?

Lukman
22 Jul 2009, 8:05 AM
I've implemented my own plugin for above purpose:


/**
* 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
*
*/

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" href="{url}" 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({}, {
url: item.tabURL || '#'
}, Ext.TabPanel.prototype.getTemplateArgs.call(tabpanel, item));
}
}
});
Ext.preg('taburl', Ext.ux.TabURL);

Add plugin to TabPanel, and specify tabURL for each child panel of the TabPanel.