title: ExtJS mvc loading view after successfully logged in
body: <p>I am trying to develop an application in ExtJS using MVC. The aim of design application is something:
  1. Create a log in page for authentication 
  2. after successful log in I have to show 3 grids in single page. These 3 grids have different stores and models.</p>
  
  <p>I am able to design login page, but I am facing problem in going fwd to next view after logged in.
  =====> controller/Login.js</p>
  
  <pre><code>Ext.define('MyApp.controller.Login', {
      extend: 'Ext.app.Controller',
  
  
  views: ['Login'],
  
      refs: [
          {
              ref: 'viewportmain',
              selector: 'viewportmain'
          }
        ],
  
      init: function () {
          this.control({
          'viewport &gt; panel': {
                  render: this.onPanelRendered
              },
  
              'button[action=submitLogin]': {
                  click: this.submitLoginForm
              }
          });
      },
  
  onPanelRendered: function() {
          console.log('The panel was rendered');
      },
  
      submitLoginForm: function (button) {
  ///// DO NOT BOTHER ABOUT LOGIN AUTHENTICATION PROCESS
  
          console.log('submitLoginForm function');
         // var view = Ext.create('MyApp.view.Order', {});
  
          var OrderController = this.getController('MyApp.controller.Order');
          OrderController.showNext(button);
  // I HAVE TRIED CERTAIN WAYS IN COMMENTED SECTION
         // var view1 = OrderController.getOrderView();
         // var form = button.up('form').getForm();
          //var view1 = this.getOrder();
          var form = button.up('form').getForm();
          form.owner.up('viewport').getLayout().next();
          //this.getViewportmain();
      console.log('The ');
  
      }
  
  });
  </code></pre>
  
  <p>======> controller/Order.js</p>
  
  <pre><code>Ext.define('MyApp.controller.Order', {
      extend: 'Ext.app.Controller',
      alias: 'controller.order',
  
      stores:['Order'],
      models:['Order'],
      views: ['Order'],
      init: function () {
          this.getOrderStore().load();
  
      },
  
      showNext: function(button) {
  
          var view = Ext.create('MyApp.view.Order');
          view.show();
  
      }
  
  });
  </code></pre>
  
  <p>=======> view/viewport.js</p>
  
  <pre><code>Ext.define('MyApp.view.Viewport', {
      extend: 'Ext.container.Viewport',
      alias: 'widget.viewportmain',
  
      requires: [
          'MyApp.view.Login',
          'MyApp.view.Order',
          'MyApp.view.DisplayGrids'
      ],
  
      layout: 'fit',
  
      items: [{
          xtype: 'login'
      }, {
          xtype: 'form',
          layout: 'fit',
          title: 'new form'
      }]
  });
  </code></pre>
  
  <p>=======> app.js</p>
  
  <pre><code>Ext.Loader.setConfig({enabled:true});
  
  Ext.application({
      name: 'MyApp',
  
      appFolder: 'App',
  
      models:['Order'],
      stores:['Order'],
     controllers: [
          'Login'//, 'Order'
      ],
  
      autoCreateViewport: true
  });
  </code></pre>
  
  <p>I am trying to make these grids combine in the commoon panel 
  ========> view/DispalyGrid.js</p>
  
  <pre><code>Ext.define('MyApp.view.DisplayGrids' ,{
      extend: 'Ext.form.Panel',
  
      alias: 'widget.displaygrids',
  
  
      layout: 'fit',
  
      items: [{
        xtype: 'order'
      }]
  });
  </code></pre>
  
  <p>I have tried to call Order from DisplayGrid which eventually gives errors so I tried to go directly with the view/Order.</p>
  
  <p>Please guide me this I was trying this thing from long time and I am doing something really wrong.
  I have tried <a href="https://stackoverflow.com/questions/8248643/extjs-4-how-to-create-and-display-a-new-controller-view-from-another-controller">this</a> but every time it gave me error</p>
  
  <pre><code>Cannot read property 'buffered' of undefined
  </code></pre>
  
  <p>Thanks in advance. :D </p>