ExtJS mvc loading view after successfully logged in -

i trying develop application in extjs using mvc. aim of design application something: 1. create log in page authentication 2. after successful log in have show 3 grids in single page. these 3 grids have different stores , models.

i able design login page, facing problem in going fwd next view after logged in. =====> controller/login.js

ext.define('myapp.controller.login', {     extend: 'ext.app.controller',   views: ['login'],      refs: [         {             ref: 'viewportmain',             selector: 'viewportmain'         }       ],      init: function () {         this.control({         'viewport > panel': {                 render: this.onpanelrendered             },              'button[action=submitlogin]': {                 click: this.submitloginform             }         });     },  onpanelrendered: function() {         console.log('the panel rendered');     },      submitloginform: function (button) { ///// not bother login authentication process          console.log('submitloginform function');        // var view = ext.create('myapp.view.order', {});          var ordercontroller = this.getcontroller('myapp.controller.order');         ordercontroller.shownext(button); // have tried 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 ');      }  }); 

======> controller/order.js

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();      }  }); 

=======> view/viewport.js

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'     }] }); 

=======> app.js

ext.loader.setconfig({enabled:true});  ext.application({     name: 'myapp',      appfolder: 'app',      models:['order'],     stores:['order'],    controllers: [         'login'//, 'order'     ],      autocreateviewport: true }); 

i trying make these grids combine in commoon panel ========> view/dispalygrid.js

ext.define('myapp.view.displaygrids' ,{     extend: 'ext.form.panel',      alias: 'widget.displaygrids',       layout: 'fit',      items: [{       xtype: 'order'     }] }); 

i have tried call order displaygrid gives errors tried go directly view/order.

please guide me trying thing long time , doing wrong. have tried this every time gave me error

cannot read property 'buffered' of undefined 

thanks in advance. :d

well, 1 problem using layout: 'fit' trying put 2 items in on viewport. layout: 'fit' containing single component should 'fit' body of parent. if login form window component, not need child item of viewport. use application's init template method instantiate login form , attach callback form window's close event. in callback, want load() stores , show() 'displaygrids' view. need set store autoload: false won't try , load until logged in.

better yet: don't tackle whole thing 1 task. break down. work on creating viewport login form that, when closed, reveals panel plain text. after working, then can starting messing stores , grids -- otherwise, may run multiple distractions detract ability things done efficiently (like cannot read property 'buffered' error message.)