javascript - 如何将 ExtJS 组件扩展到全屏并稍后恢复？

Question

如何扩展 ExtJS(版本 3.3.1)组件，例如一个 Ext.Panel 嵌套在文档层次结构中的某个位置以“全屏”以便它占据整个浏览器窗口区域？我想我需要动态创建一个 Ext.Viewport 并重新设置正在“扩展”的组件的父级，但到目前为止我还没有成功。有人可以提供工作样本吗？

此外，如果可能的话，我希望能够在以后的某个时候将组件恢复到其原始位置。

我尝试了以下方法:

new Ext.Button({ text: 'Fullscreen', renderTo : Ext.getBody(), onClick: function(){
    var viewPort = new Ext.Viewport({
        renderTo: Ext.getBody(),
        layout: "fit",
        items: [ panelToBeExpanded ]
        });
    viewPort.doLayout();
}});

效果不是很好。单击按钮后，面板 panelToBeExpanded 似乎占据了视口(viewport)区域，但前提是 BODY 部分中没有 HTML，否则视口(viewport)不会完全展开。此外，之后使用重新设置父级的面板会在大多数浏览器中导致奇怪的闪烁。

是否有一种可靠的方法可以将组件普遍(最好是暂时)扩展到整个浏览器窗口？

更新

感谢评论中的建议，创建一个新的最大化的 Ext.Window 似乎是一个很好的解决方案。第二部分有点棘手 - 如何在关闭窗口后将重新设置父级的组件移回其在 DOM(和 ExtJS 组件层次结构)中的原始位置？

感谢您的帮助!

Answer 1

你可以使用 Ext.Window.toggleMaximize方法。我创建了一个简单的工作示例，请查看 here

请注意 Ext.Window 在其呈现容器内最大化，因此如果您使用“renderTo”属性并将其设置为页面内的某个 div，Window 将仅与包含它的 div 一样大。这就是我使用文档主体来呈现 myWindow 的原因。当然你也可以使用 Ext.Window.x和 Ext.Window.y配置属性以将您的窗口定位在需要的位置。