Ext.js 4.x可停靠窗口作为选项卡

Question

有没有人看过extjs的实现或插件,你可以用浏览器"拉出"或"停靠"选项卡/窗口？它甚至可能吗？

搜索没有透露太多,但我确实遇到了旧版本的建议解决方案:http://www.sencha.com/forum/showthread.php？ 16842-Dockable-floatable-panels-in- ExtJS

@DmitryB

为了澄清,如果我在同一个窗口中有多个选项卡,那么在chrome中:

然后我"拖动"其中一个标签,它弹出一个新窗口:

我想你可以通过将选项卡面板的内容移动到一个窗口但不确定如何去做它来实现这一点.

Answer 1

简而言之：

- 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.

不幸的是，我仍然对在 ExtJS3 中学习 D&D 感到厌倦，所以我无法提供任何与 ExtJS 4 有关的代码和实际代码的帮助，但这个概念对我来说似乎相对简单。我想说你可能会想尽你最大的努力不要让它变得华而不实 - 除非你真的真的需要，我不会担心在拖动选项卡时显示面板的内容 - 更不用说显示面板本身。只需让选项卡元素在屏幕上拖动并在将其释放到安全区域之外时进行复制即可。