title: vbox and hbox in extjs
body: <p>I want to make this structure in extjs usign nesting of hbox and vbox layout for the containers. I succeeded with the periferal components but I cannot stretch properly the containers in the center. What do i do wrong? </p>
  
  <p>Here is the image:</p>
  
  <p><img src="https://i.stack.imgur.com/zpDaR.jpg" alt="enter image description here"></p>
  
  <p>I tried creating container like this, for the center grid</p>
  
  <pre><code>var innerContainer = Ext.create('Ext.container.Container', {
  
      layout:vbox,
  
      items:[{
          xtype:'container',
          flex:1,
          layout: 'hbox',
          items:[{
               xtype:'container',
               flex:1
          },{
               xtype:'container',
               flex:1
          }]
      },{
          xtype:'container',
          flex:1,
          layout: 'hbox',
          items:[{
               xtype:'container',
               flex:1
          },{
               xtype:'container',
               flex:1
          }]
      },{
          xtype:'container',
          flex:1,
          layout: 'hbox',
          items:[{
               xtype:'container',
               flex:1
          },{
               xtype:'container',
               flex:1
          }]
      },{
          xtype:'container',
          flex:1,
          layout: 'hbox',
          items:[{
               xtype:'container',
               flex:1
          },{
               xtype:'container',
               flex:1
          }]
      }]
  });
  </code></pre>
  
  <p>The problem I get is I cannot stretch the inside containers to the full size of the innerContainer. </p>
  
  <p>Can I achieve this with empty container and without setting width property?</p>
  
  <p>Or should I use different strategy to acomplish my goal?</p>