成功登录后extJS mvc加载视图

我想在使用MVC的ExtJS中开发应用程序。设计应用程序的目标是： 1.创建登录页面进行身份验证 2.成功登录后，我必须在单个页面中显示3个网格。这3个网格有不同的商店和模型。成功登录后extJS mvc加载视图

我能设计的登录页面，但我在准备转送至登录后下一个视图面临的问题。 =====>控制器/ 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 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 '); 

    } 

});

==== ==>控制器/ Order.js

=======>视图/ 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 
});

我试图使这些网格相结合的commoon面板 ========>视图/ DispalyGrid.js

Ext.define('MyApp.view.DisplayGrids' ,{ 
    extend: 'Ext.form.Panel', 

    alias: 'widget.displaygrids', 


    layout: 'fit', 

    items: [{ 
     xtype: 'order' 
    }] 
});

我试图从DisplayGrid来电订购哪些最终会给出错误，因此我试图直接使用视图/顺序。

请指导我，我很长时间就在尝试这件事情，而我正在做一些非常错误的事情。我试图this但每次它给了我错误

Cannot read property 'buffered' of undefined

在此先感谢。：D

来源

2013-03-01 aksdch11

请看看[这个答案]（http://stackoverflow.com/questions/14810340/load-new-view-after-the-loginin-extjs-4-mvc/14812218#14812218），让我知道如果它以任何方式帮助您解决问题。 – Izhaki 2013-03-03 16:46:26

嗯，一个问题是，您正在使用layout: 'fit'，但随后试图将两个项目放在视口上。 layout: 'fit'是用于包含应该适合父母体的单个组件。如果您的登录表单是一个窗口组件，则它不需要是视口的子项。使用您的应用程序的init template method实例化您的登录表单，并将回调附加到表单窗口的close事件。在回调中，您需要load()您的店铺和show()您的'DisplayGrids'视图。您需要将您的商店设置为autoload: false，以便在您登录之前不会尝试加载。

更好的是：不要将这整件事视为一项任务。分解它。使用登录表单创建视口，当关闭时，会显示带有一些纯文本的面板。当你得到这个工作后，你可以开始搞乱你的商店和网格 - 否则，你可能会遇到多种分散注意力，这会降低你有效完成工作的能力（如cannot read property 'buffered'错误消息。）

来源

2013-03-02 19:03:06 tuespetre

和@ tuespetre @ Izhaki感谢您的建议，我能够得到这项工作。 – aksdch11 2013-03-05 23:58:04

成功登录后extJS mvc加载视图

回答

相关问题