title: How to expand an ExtJS Component to fullscreen and restore it back later?
body: <p>how can I expand an ExtJS (version 3.3.1) Component, e.g. a Ext.Panel nested somewhere in the document hierarchy to "fullscreen" so that it takes up the whole browser window region? I guess I need to create an Ext.Viewport dynamically and reparent the component being "expanded", but I've had no success so far. Could someone provide a working sample?</p>
  
  <p>Also, I'd like to be able to restore the component to its original place at some point later, if that's at all possible.</p>
  
  <p>I tried the following:</p>
  
  <pre><code>new Ext.Button({ text: 'Fullscreen', renderTo : Ext.getBody(), onClick: function(){
      var viewPort = new Ext.Viewport({
          renderTo: Ext.getBody(),
          layout: "fit",
          items: [ panelToBeExpanded ]
          });
      viewPort.doLayout();
  }});
  </code></pre>
  
  <p>which does not work very well. Upon clicking the button, the panel <code>panelToBeExpanded</code> seems to take up the viewport region, but only if there is no HTML in the BODY section, otherwise viewport is not fully expanded. Also, working with the reparented panel afterwards causes weird flicker in most browsers.</p>
  
  <p>Is there a reliable way to universally (ideally temporarily) expand a component to the whole browser window?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Thanks to a suggestion in the comments, <strong>creating a new maximized Ext.Window seems to be a good solution</strong>. The second part is a bit tricky though - <strong>how to move the reparented component back to its original place</strong> in DOM (and ExtJS component hierarchy) once the window is closed?</p>
  
  <p>Thanks for your help!</p>