title: ExtJs5.1 - Nested Panels: resize inner panels to outer panel
body: <h2>Problem Description</h2>
  <p>I got some ExtJs5.1 code, which has a couple of <strong>nested components</strong>, like <em>Ext.form.field.TextArea</em>, <em>Ext.tab.Panel</em> and <em>Ext.Button</em>.</p>
  <p>You can <em>copy&amp;paste</em> the following code to reproduce my problem into a <strong>index.html</strong> file and experiment with it (assuming you have a local-webserver running and copied the ExtJs5.1 files into the htdocs folder of the webserver, for example like Xampp):</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;      
      &lt;script type=&quot;text/javascript&quot; src=&quot;/ext-5.1.1/build/ext-all-debug.js&quot;&gt;&lt;/script&gt;
  
      &lt;link id=&quot;theme1&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css&quot;&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js&quot;&gt;&lt;/script&gt;
  
      
      
      &lt;script type =&quot;text/javascript&quot;&gt;
      Ext.onReady( function(){
      
              var textfield = 
                  Ext.create('Ext.form.field.TextArea', {
                                  title: 'textfield',
                                  autoscroll: true});
              
              var textfield_2 = 
                  Ext.create('Ext.form.field.TextArea', {
                                  title: 'textfield_2',
                                  autoscroll: true});
                                  
              var tab_panel = 
                  Ext.create('Ext.tab.Panel', {
                                  title: 'tab_panel',
                                  columnWidth: 0.5,
                                  padding: '10 10 10 10',
                                  items:[textfield, textfield_2]  
                              });
              
              var right_panel = 
                  Ext.create('Ext.panel.Panel', {
                                  title: 'right_panel',
                                  columnWidth: 0.5,
                                  html: 'blablabalablablaba3',
                                  padding: '10 10 10 10'
                              });
              
              var lower_vbox_panel = Ext.create('Ext.panel.Panel', {
                  title: 'lower_vbox_panel',
                  frame: true,
                  autoscroll: true,
                  layout: {type: 'column'},           
                  margin: '10 10 10 10',
                  items: [tab_panel,right_panel]
              });
              
              var button_1 = Ext.create('Ext.Button', {
                  text: 'button_1',
                  padding: '15 15 15 15',
                  margin: '10 10 10 10',
                  handler: function() {
                      console.log('button_1 click!');
                  }
              });
              
              var button_2 = Ext.create('Ext.Button', {
                  text: 'button_2',
                  padding: '15 15 15 15',
                  margin: '10 10 10 10',
                  handler: function() {
                      console.log('button_2 click!');
                  }
              });
              
              var upper_vbox_panel = Ext.create('Ext.panel.Panel', {
                  title: 'upper_vbox_panel',
                  margin: '10 10 10 10',
                  frame: true,
                  items: [button_1, button_2]
              });
              
              var vbox_panel = Ext.create('Ext.panel.Panel', {
                  frame: true,
                  title: 'vbox_panel',
                  renderTo: Ext.getBody(),
                  autoscroll: true,
                  margin: '15 15 15 15',
                  layout: {type: 'vbox', align: 'stretch'},
                  items: [upper_vbox_panel,lower_vbox_panel]
              });
  
              textfield.setValue(&quot;blablablablabla&quot;);
              textfield_2.setValue(&quot;blablablablabla2&quot;);
          
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
  </code></pre>
  
  <p>After resizing the browser-window, the outer panel named <strong>vbox_panel</strong> does resize automatically to fit the browser-windows' width and height.</p>
  <p>Unfortunately, the two nested panels named <strong>upper_vbox_panel</strong> and <strong>lower_vbox_panel</strong> together with their nested components do not resize with respect to the outer panel named <strong>vbox_panel</strong>.</p>
  <h2>Question:</h2>
  <p><strong>How can the two nested panels also be resized with respect to the outer panel named <em>vbox_panel</em>?</strong></p>
  <h2>EDIT:</h2>
  <p>I found out that the class <strong>Ext.container.Viewport</strong> is used to fit containers to the browser-window, so the outer panel named <strong>vbox_panel</strong> must be added to it:</p>
  <pre><code>var vp = new Ext.Viewport({
      layout : 'fit',
      items : [vbox_panel] ,
      renderTo : Ext.getBody()
  });
  </code></pre>
  <p>Now the width of every nested component is changing after resizing the browser-window, but the height of them is not.</p>
  <p>I have searched half the internet on solutions, including things like: layout: 'anchor', align:'stretch' etc. pp.. But none of them work.</p>
  <h2>New Question after edit:</h2>
  <p><strong>How to incorporate the change of browser-window-height into the nested components?</strong></p>