如何将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似乎占据视区区域，但前提是BODY区域中没有HTML，否则viewport未完全展开。而且，之后使用重新安装的面板会在大多数浏览器中导致奇怪的闪烁。

是否有一种可靠的方法来通用（理想情况下是暂时）将组件扩展到整个浏览器窗口？

UPDATE

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

感谢您的帮助！

Answer 1

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

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

Answer 2

这是有点晚了，但现在才意识到这一点，并记得我不得不做类似的事情，并最终覆盖文本区域组件，它会自动扩展到全屏双击通过创建组件的副本一个全尺寸的窗口。在关闭时，值将自动更新到隐藏在全屏幕窗口后面的实例化组件中，因此永远不会从首先出现在dom中。

这是我的代码我认为这是相当不言自明的。

希望它可以帮助别人！

Rob。

/** 
* Override for default Ext.form.TextArea. Growing to near full-screen/full-window on double-click. 
* 
* @author Rob Schmuecker (Ext forum name rob1308) 
* @date September 13, 2010 
* 
* Makes all text areas enlargable by default on double-click - to prevent this behaviour set "popout:false" in the config 
* By default the fieldLabel of the enhanced field is the fieldLabel of the popout - this can be set separately with "popoutLabel:'some string'" this will also inherit the same labelSeparator config value as that of the enhanced parent. 
* The close text for the button defaults to "Close" but can be overriden by setting the "popoutClose:'some other text'" config 
*/ 

Ext.override(Ext.form.TextArea, { 
    popout: true, 
    onRender: function(ct, position) { 
     if (!this.el) { 
      this.defaultAutoCreate = { 
       tag: "textarea", 
       style: "width:100px;height:60px;", 
       autocomplete: "off" 
      }; 
     } 
     Ext.form.TextArea.superclass.onRender.call(this, ct, position); 
     if (this.grow) { 
      this.textSizeEl = Ext.DomHelper.append(document.body, { 
       tag: "pre", 
       cls: "x-form-grow-sizer" 
      }); 
      if (this.preventScrollbars) { 
       this.el.setStyle("overflow", "hidden"); 
      } 
      this.el.setHeight(this.growMin); 
     } 
     if (this.popout && !this.readOnly) { 

      if (!this.popoutLabel) { 
       this.popoutLabel = this.fieldLabel; 
      } 
      this.popoutClose = 'Close'; 
      var field = this; 
      this.getEl().on('dblclick', 
      function() { 
       field.popoutTextArea(this.id); 
      }); 
     }; 
    }, 
    popoutTextArea: function(elId) { 
     var field = this; 
     tBox = new Ext.form.TextArea({ 
      popout: false, 
      anchor: '100% 100%', 
      labelStyle: 'font-weight:bold; font-size:14px;', 
      value: Ext.getCmp(elId).getValue(), 
      fieldLabel: field.popoutLabel, 
      labelSeparator: field.labelSeparator 
     }); 

     viewSize = Ext.getBody().getViewSize(); 
     textAreaWin = new Ext.Window({ 
      width: viewSize.width - 50, 
      height: viewSize.height - 50, 
      closable: false, 
      draggable: false, 
      border: false, 
      bodyStyle: 'background-color:#badffd;', 
      //bodyBorder:false, 
      modal: true, 
      layout: 'form', 
      // explicitly set layout manager: override the default (layout:'auto') 
      labelAlign: 'top', 
      items: [tBox], 
      buttons: [{ 
       text: field.popoutClose, 
       handler: function() { 
        Ext.getCmp(elId).setValue(tBox.getValue()); 
        textAreaWin.hide(Ext.getCmp(elId).getEl(), 
        function(win) { 
         win.close(); 
        }); 
       } 
      }] 
     }).show(Ext.getCmp(elId).getEl()); 
    } 

});