title: extjs layouts, embedding html inside extjs viewport
body: <p>i am trying to layout the following html inside this extjs viewpoint:</p>
  
  <pre><code>Ext.application({
  name: 'HelloExt',
  launch: function() {
      Ext.create('Ext.container.Viewport', {
          layout: 'fit',
          items: [
              {
                  title: 'Hello Ext',
                  html : 'Hello! Welcome to Ext JS.'
              }
          ]
      });
  }
  </code></pre>
  
  <p>});</p>
  
  <p>the HTML:</p>
  
  <pre><code>&lt;div id='logo'&gt;&lt;/div&gt;
  &lt;header class='search'&gt;
      &lt;input type="search"&gt;
  &lt;/header&gt;
  &lt;br class="clear" /&gt;
  &lt;header class='main'&gt;
      &lt;nav class='main'&gt;
          &lt;ul&gt;
              &lt;li&gt;Dashboard&lt;/li&gt;
              &lt;li&gt;Claims Handling&lt;/li&gt;
              &lt;li&gt;Reports&lt;/li&gt;
              &lt;li&gt;Accounts&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;nav class='menu'&gt;
          &lt;ul&gt;
              &lt;li&gt;Mini Portal&lt;/li&gt;
              &lt;li&gt;Authorize Transaction&lt;/li&gt;
              &lt;li&gt;Insert Invoice Number&lt;/li&gt;
              &lt;li&gt;Add Batch Claims&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  &lt;section id='container'&gt;
      &lt;div class='head'&gt;
          &lt;header class='sub'&gt;
              &lt;h1&gt;Authorize Transaction&lt;/h1&gt;
              &lt;nav class='sub'&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href=""&gt;Authorize&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Insert Number&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Add Batch Claims&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Change Details&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
                              &lt;section class="table"&gt;&lt;/section&gt;
                              &lt;div id="forms"&gt;&lt;/div&gt;
          &lt;/header&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>could anyone please explain how this could be done?</p>