PDA

View Full Version : Popout plugin for TabPanel



devtig
29 Aug 2010, 10:15 PM
I'm thinking of creating a plugin for TabPanel. It'd show an icon on every tab or just one on the left of the tabstrip. When you click it, the content of the tab pops out into a new window and the tab is removed. A bit like chrome where you can drag out a tab into a new chrome window.

Any ideas on the subject or do you know about similar effects already accomplished in extjs?

Animal
31 Aug 2010, 9:42 PM
Should be a very simple plugin. Just remove the child tab, and add it to a Window.

I did something similar before the concept of plugins was invented...

http://www.sencha.com/forum/showthread.php?16842-Dockable-floatable-panels-in-ExtJS&p=81347#post81347

devtig
1 Sep 2010, 7:03 AM
This works for me.


/**
* @class Ext.ux.TabUndockMenu
* @extends Object
* Plugin (ptype = 'tabundockmenu') for adding a undock context menu to tabs. Build like Ext.ux.TabCloseMenu.
*
* @constructor
* @param {Object} config The configuration options
* @ptype tabundockmenu
*/
Ext.ux.TabUndockMenu = Ext.extend(Object, {
/**
* @cfg {String} undockToWindowText
* The text for undocking a tab to a new window
*/
undockToWindowText: 'Undock To New Window',

constructor : function(config){
Ext.apply(this, config || {});
},

//public
init : function(tabs){
this.tabs = tabs;
tabs.on({
scope: this,
contextmenu: this.onContextMenu,
destroy: this.destroy
});
},

destroy : function(){
Ext.destroy(this.menu);
delete this.menu;
delete this.tabs;
delete this.active;
},

// private
onContextMenu : function(tabs, item, e){
this.active = item;
var m = this.createMenu()

e.stopEvent();
m.showAt(e.getPoint());
},

createMenu : function(){
if(!this.menu){
var items = [{
itemId: 'undock',
text: this.undockToWindowText,
scope: this,
handler: this.onUndockToWindow
}]
this.menu = new Ext.menu.Menu({
items: items
});
}
return this.menu;
},

onUndockToWindow : function(){
var activeTab=this.tabs.getActiveTab();
var h = activeTab.getEl().getHeight();
var w = activeTab.getEl().getWidth();
var win;
win = new Ext.Window({
//give window same layout as the TabPanel's container
layout: this.tabs.ownerCt.layout.type,
renderTo: Ext.getBody(),
title: activeTab.title,
constrain: true,
items: activeTab,
tools: [{
id: 'pin',
qtip: 'Redock to original parent',
handler: function() {
this.tabs.add(activeTab);
this.tabs.setActiveTab(activeTab);
this.tabs.doLayout();
win.destroy();
},
scope: this
}]
});
win.setHeight(h);
win.setWidth(w);
win.show();
}
});

Ext.preg('tabundockmenu', Ext.ux.TabUndockMenu);