title: ExtJs 4 MVC Nested Layouts
body: <p>I'm trying to implement a simple framework for an app. The idea is to create a background viewport type 'layout' with a north region containing the page header and an interchangeable center region.</p>
  
  <p>When my app starts, a Login form is shown. If the user/password is ok, the form is destroyed and the main layout should appear. The main layout should insert a nested layout in its center region.</p>
  
  <p>This is my background layout code:</p>
  
  <pre><code>Ext.define('DEMO.view.BackgroundLayout', {
      extend: 'Ext.container.Viewport',
      alias: 'widget.background',
      requires: [
          'DEMO.view.Main'
      ],
  
      layout: {
          type: 'border'
      },
  
      initComponent: function() {
          var me = this;
          Ext.applyIf(me, {
              items: [
                  {
                      region: 'north', 
                      html: '&lt;h1 class="x-panel-header"&gt;Page Title&lt;/h1&gt;'
                  },
                  {
                      xtype: 'mainview',
                      region: 'center',
                      forceFit: false,
                      height: 400   
                  }
              ]
          });
  
          me.callParent(arguments);
      }
  });
  </code></pre>
  
  <p>The main layout is this:</p>
  
  <pre><code>Ext.define('DEMO.view.Main', {
      extend: 'Ext.container.Viewport',
      alias: 'widget.mainview',
      requires: [
          'DEMO.view.MyGridPanel'
      ],
  
      layout: {
          type: 'border'
      },
  
      initComponent: function() {
          var me = this;
              console.log('bb');
          Ext.applyIf(me, {
              items: [
                  {
                      xtype: 'mygridpanel',
                      region: 'center', 
                      forceFit: false
                  },
                  {
                      xtype: 'container',
                      height: 38,
                      forceFit: false,
                      region: 'north',
                      items: [
                          {
                              xtype: 'button',
                              height: 34,
                              id: 'btnLogout',
                              action: 'logout',
                              text: 'Logout'
                          }
                      ]
                  }
              ]
          });
          me.callParent(arguments);
      }
  });
  </code></pre>
  
  <p>As you can see, the center region needs an xtype named "mygridpanel". This is the code for it:</p>
  
  <pre><code>Ext.define('DEMO.view.ui.MyGridPanel', {
      extend: 'Ext.grid.Panel',
  
      border: '',
      height: 106,
      title: 'My Grid Panel',
      store: 'MyJsonStore',
  
      initComponent: function() {
          var me = this;
  
          Ext.applyIf(me, {
              viewConfig: {
  
              },
              columns: [
                  {
                      xtype: 'gridcolumn',
                      dataIndex: 'Id',
                      text: 'Id'
                  },
                  {
                      xtype: 'gridcolumn',
                      dataIndex: 'Name',
                      text: 'Name'
                  },
                  {
                      xtype: 'gridcolumn',
                      dataIndex: 'Sales',
                      text: 'Sales'
                  }
              ],
              dockedItems: [
                  {
                      xtype: 'toolbar',
                      dock: 'top',
                      items: [
                          {
                              xtype: 'button',
                              disabled: true,
                              id: 'btnDelete',
                              allowDepress: false,
                              text: 'Delete'
                          },
                          {
                              xtype: 'button',
                              disabled: true,
                              id: 'btnEdit',
                              allowDepress: false,
                              text: 'Edit'
                          }
                      ]
                  }
              ]
          });
  
          me.callParent(arguments);
      }
  });
  </code></pre>
  
  <p>My problem is that when I call Ext.create('DEMO.view.BackgroundLayout', {}); it only shows the nested layout, and the background layout is hidden, also I get this error in Chrome's console:</p>
  
  <pre><code>Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
  </code></pre>
  
  <p>What I'm doing wrong?.</p>
  
  <p>Thanks in advance,
  Leonardo.</p>