9

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.

David
  • 554
  • 3
  • 15
  • not quite sure what you mean. the browser opens new tabs - there is a tabpanel for that. Do you mean like a desktop? http://docs.sencha.com/ext-js/4-0/#!/example/desktop/desktop.html – dbrin Mar 24 '12 at 04:44
  • @DmitryB see updated description of my question. Hopefully this clarifies what I'm after – David Mar 25 '12 at 20:36
  • 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 Mar 26 '12 at 03:19

1 Answers1

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.

phatskat
  • 1,797
  • 1
  • 15
  • 32
  • Although this doesnt solve the issue the comment is useful for better organizing the concept. Thanks – David Apr 25 '12 at 16:59