title: Ext JS 4 layout and panel structure
body: <p>Allow me to preface my question by admitting that I am a complete newbie to Ext JS, so please excuse my ignorance. I am familiar with HTML, CSS and JavaScript/JQuery so I get most of the syntax in individual pieces, but I am having trouble combining those pieces.</p>
  
  <p>I would like to start by building a basic page layout which would include a header that spans the entire top row, a left column that takes up 50% of the remaining space below and a right column with the same dimensions as the left.</p>
  
  <p>Eventually, I would like to display different types of content in the panels, but for now, I need to understand the basic syntax and structure of Ext JS layouts and viewports. As it stands, I am ultimately confused. Below is a sample of my first attempt at some code, but it is obviously way off-base:</p>
  
  <pre><code>var panel = new Ext.Panel({
      fullscreen: true,
      layout: {
          type: "Panel",
          align: "fit",
      },
      items: [
          {
              xtype: "panel",
              id: "topHeader",
              title: "Header",
              style: "height:200px;"
          },
          {
              xtype: "panel",
              id: "left",
              title: "Left",
              style: "width:500px;z-index:2;background-color:#ccc;position:absolute;left:0px;"
          },
          {
              xtype: "panel",
              id: "right",
              title: "Right",
              style: "width:500px;z-index:2;background-color:#000;position:absolute;right:0px;"
          }
      ]
  });
  </code></pre>