Question

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

我可以设计登录页面，但登录后我在前往下一个视图时遇到问题。 =====＆GT;控制器/ 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 ');

    }

});

==＆GT;控制器/ 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();

    }

});

=======＆GT;视图/ 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'
    }]
});

=======＆GT; app.js

Ext.Loader.setConfig({enabled:true});

Ext.application({
    name: 'MyApp',

    appFolder: 'App',

    models:['Order'],
    stores:['Order'],
   controllers: [
        'Login'//, 'Order'
    ],

    autoCreateViewport: true
});

我正在尝试将这些网格组合在通勤面板中 ======＆GT;视图/ DispalyGrid.js

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

    alias: 'widget.displaygrids',


    layout: 'fit',

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

我试图从DisplayGrid调用Order，最终会出错，所以我试图直接使用view / Order。

请指导我，这是我长时间尝试这件事，我做错了什么。我试过了this，但每次都给我错误

Cannot read property 'buffered' of undefined

提前致谢。：D

Answer 1

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

更好的是：不要将整个事情作为一项任务来解决。分解。使用登录表单创建视口的工作，在关闭时，会显示带有一些纯文本的面板。在你完成这项工作之后然后你可以开始搞乱你的商店和网格 - 否则，你可能会遇到多种分散注意力，从而影响你有效完成工作的能力（比如{{1错误信息。）

成功登录后的ExtJS mvc加载视图

1 个答案: