如何將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()); 
    } 

});