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: Before detaching tab

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

after detaching tab

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.

not quite sure what you mean. the browser opens new tabs - there is a tabpanel for that. Do you mean like a desktop? docs.sencha.com/ext-js/4-0/#!/example/desktop/desktop.html — dbrin
@DmitryB see updated description of my question. Hopefully this clarifies what I'm after — David
I see. In the thread Animal has code to pull one of the panels from a tabpanle into an ExtJS window component which would be floated by default. I believe that code will still work in 4. — dbrin

phatskat phatskat · Accepted Answer · 2012-04-19T19:05:47

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.

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

1 Answers