javascript – 如何将ExtJS组件扩展到全屏并稍后将其还原？

如何扩展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似乎占据视口区域,但前提是BODY部分中没有HTML,否则视口未完全展开.此外,之后使用重新配置的面板会在大多数浏览器中产生奇怪的闪烁.

是否有一种可靠的方法可以普遍(理想情况下)将组件扩展到整个浏览器窗口？

UPDATE

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

谢谢你的帮助！

解决方法:

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

请注意Ext.Window在其渲染容器中最大化,因此如果您使用“renderTo”属性并将其设置为页面内的某个div,则Window将仅与包含它的div一样大.这就是为什么我使用文档正文来渲染myWindow.当然,您也可以使用Ext.Window.x和Ext.Window.y配置属性在想要的位置找到您的窗口.