title: load different views into viewport
body: <p>I am using a main viewport. I use the north panel for buttons. When i click on a button i want to load a panel in the center region. I made some views in architect allready.</p>
  
  <p>mainviewport</p>
  
  <pre><code>Ext.define('MyApp.view.MyViewport', {
  extend: 'Ext.container.Viewport',
  
  layout: {
      type: 'border'
  },
  
  initComponent: function() {
      var me = this;
  
      Ext.applyIf(me, {
          items: [
              {
                  xtype: 'container',
                  height: 65,
                  region: 'north',
                  items: [
                      {
                          xtype: 'button',
                          height: 50,
                          maxHeight: 50,
                          maxWidth: 50,
                          minHeight: 50,
                          minWidth: 50,
                          style: 'margin: 5px;',
                          width: 50,
                          text: 'Home'
                      },
                      {
                          xtype: 'button',
                          height: 50,
                          maxHeight: 50,
                          maxWidth: 50,
                          minHeight: 50,
                          minWidth: 50,
                          style: 'margin: 5px;',
                          width: 50,
                          text: 'Verkoop'
                      },
                      {
                          xtype: 'button',
                          height: 50,
                          maxHeight: 50,
                          maxWidth: 50,
                          minHeight: 50,
                          minWidth: 50,
                          style: 'margin: 5px;',
                          width: 50,
                          text: 'Verhuur'
                      },
                      {
                          xtype: 'button',
                          height: 50,
                          maxHeight: 50,
                          maxWidth: 50,
                          minHeight: 50,
                          minWidth: 50,
                          style: 'margin: 5px;',
                          width: 50,
                          text: 'Magazijn'
                      },
                      {
                          xtype: 'button',
                          height: 50,
                          maxHeight: 50,
                          maxWidth: 50,
                          minHeight: 50,
                          minWidth: 50,
                          style: 'margin: 5px;',
                          width: 50,
                          text: 'TD'
                      },
                      {
                          xtype: 'button',
                          height: 50,
                          maxHeight: 50,
                          maxWidth: 50,
                          minHeight: 50,
                          minWidth: 50,
                          style: 'margin: 5px;',
                          width: 50,
                          text: 'Planning'
                      },
                      {
                          xtype: 'button',
                          height: 50,
                          maxHeight: 50,
                          maxWidth: 50,
                          minHeight: 50,
                          minWidth: 50,
                          style: 'margin: 5px;',
                          width: 50,
                          text: 'Facturen'
                      },
                      {
                          xtype: 'button',
                          height: 50,
                          maxHeight: 50,
                          maxWidth: 50,
                          minHeight: 50,
                          minWidth: 50,
                          style: 'margin: 5px;',
                          width: 50,
                          text: 'Klachten'
                      },
                      {
                          xtype: 'button',
                          height: 50,
                          maxHeight: 50,
                          maxWidth: 50,
                          minHeight: 50,
                          minWidth: 50,
                          style: 'margin: 5px;',
                          width: 50,
                          text: 'OPM'
                      }
                  ]
              }
          ]
      });
  
      me.callParent(arguments);
  }
  </code></pre>
  
  <p>when i click on the button "magazijn" for example i want to load this view into the center region:</p>
  
  <pre><code>Ext.define('MyApp.view.Magazijn', {
  extend: 'Ext.panel.Panel',
  
  layout: {
      type: 'border'
  },
  title: 'Magazijn',
  
  initComponent: function() {
      var me = this;
  
      Ext.applyIf(me, {
          items: [
              {
                  xtype: 'panel',
                  layout: {
                      type: 'border'
                  },
                  title: 'Pakbonnen',
                  region: 'center',
                  dockedItems: [
                      {
                          xtype: 'toolbar',
                          region: 'center',
                          dock: 'top',
                          items: [
                              {
                                  xtype: 'button',
                                  text: 'Beschadiging melden'
                              },
                              {
                                  xtype: 'button',
                                  text: 'Vermissing melden'
                              }
                          ]
                      },
                      {
                          xtype: 'gridpanel',
                          height: 150,
                          title: 'Uitgaande pakbonnen',
                          store: 'MyJsonStore',
                          region: 'north',
                          dock: 'top',
                          columns: [
                              {
                                  xtype: 'gridcolumn',
                                  dataIndex: 'string',
                                  text: 'String'
                              },
                              {
                                  xtype: 'numbercolumn',
                                  dataIndex: 'number',
                                  text: 'Number'
                              },
                              {
                                  xtype: 'datecolumn',
                                  dataIndex: 'date',
                                  text: 'Date'
                              },
                              {
                                  xtype: 'booleancolumn',
                                  dataIndex: 'bool',
                                  text: 'Boolean'
                              }
                          ],
                          viewConfig: {
  
                          },
                          dockedItems: [
                              {
                                  xtype: 'pagingtoolbar',
                                  width: 360,
                                  displayInfo: true,
                                  store: 'MyJsonStore',
                                  dock: 'bottom'
                              }
                          ]
                      }
                  ],
                  items: [
                      {
                          xtype: 'gridpanel',
                          title: 'Retour pakbonnen',
                          store: 'MyJsonStore',
                          region: 'center',
                          columns: [
                              {
                                  xtype: 'gridcolumn',
                                  dataIndex: 'string',
                                  text: 'String'
                              },
                              {
                                  xtype: 'numbercolumn',
                                  dataIndex: 'number',
                                  text: 'Number'
                              },
                              {
                                  xtype: 'datecolumn',
                                  dataIndex: 'date',
                                  text: 'Date'
                              },
                              {
                                  xtype: 'booleancolumn',
                                  dataIndex: 'bool',
                                  text: 'Boolean'
                              }
                          ],
                          viewConfig: {
  
                          },
                          dockedItems: [
                              {
                                  xtype: 'pagingtoolbar',
                                  width: 360,
                                  displayInfo: true,
                                  store: 'MyJsonStore',
                                  dock: 'bottom'
                              }
                          ]
                      }
                  ]
              }
          ],
          dockedItems: [
              {
                  xtype: 'toolbar',
                  width: 150,
                  region: 'west',
                  dock: 'top',
                  items: [
                      {
                          xtype: 'button',
                          text: 'Product zoeken'
                      }
                  ]
              }
          ]
      });
  
      me.callParent(arguments);
  }
  </code></pre>
  
  <p>How can i do this?</p>