Ext.js 4.x Dock-able window as tab

Question

Has anyone seen an implementation or plugin for extjs where you can "pull off" or "dock" tabs/windows the way you can with a browser? Is it even possible?

Searching has not revealed much but I did come across a proposed solution in an older version: http://www.sencha.com/forum/showthread.php?16842-Dockable-floatable-panels-in-ExtJS

@DmitryB

To clarify, in chrome if I have multiple tabs in the same window like so:

And I "drag" one of the tabs, it pops off into a new window:

I imagine you might accomplish this by moving the content of the tab panel into a window but not sure how to go about it.

Answer 1

In a nutshell:

- Make the tabs draggable, watch for the drag event and mark the 
  tab-strip as your "safe" zone
- When a tab is dragged and then "dropped" (as in, the drag event ends) you do a check:
    > Is the tab within the safe area? 
        No: Create a new Ext.Window at the x/y of the mouse, copy the components/HTML
            out of the original panel and insert them into the new window. Destroy the
            original panel.
        Yes: Do nothing.

Unfortunately, I am still quite jaded from learning D&D in ExtJS3, so I can't offer any help with this and real code pertaining to ExtJS 4, however the concept seems relatively straightforward to me. I would say you're going to probably want to do your best to NOT have this be flashy - unless you REALLY REALLY need to, I wouldn't worry about showing the panel's contents while you drag the tab - much less show the panel itself. Just let the tab element get dragged around the screen and copy when it's released outside of the safe zone.