0

MVC を使用して ExtJS でアプリケーションを開発しようとしています。デザイン アプリケーションの目的は次のとおりです。 1. 認証用のログイン ページを作成します。 2. ログインに成功した後、1 つのページに 3 つのグリッドを表示する必要があります。これら 3 つのグリッドには、異なる店舗とモデルがあります。

ログインページをデザインすることはできますが、ログイン後に次のビューに進む際に問題が発生します。 =====> 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 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

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

これらのグリッドを共通パネルで結合させようとしています ========> view/DispalyGrid.js

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

    alias: 'widget.displaygrids',


    layout: 'fit',

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

DisplayGrid から Order を呼び出そうとしましたが、最終的にエラーが発生したため、ビュー/Order を直接使用しようとしました。

私は長い間このことを試していましたが、本当に間違ったことをしています。私はこれを試しましたが、毎回エラーが発生しました

Cannot read property 'buffered' of undefined

前もって感謝します。:D

4

1 に答える 1

0

問題の 1 つは、使用しているのにlayout: 'fit'ビューポートに 2 つのアイテムを配置しようとしていることです。layout: 'fit'親の本体に「適合」する必要がある単一のコンポーネントを含めるためのものです。ログイン フォームがウィンドウ コンポーネントである場合、ビューポートの子アイテムである必要はありません。アプリケーションのinit テンプレート メソッドを使用して、ログイン フォームをインスタンス化し、コールバックをフォーム ウィンドウのcloseイベントにアタッチします。コールバックではload()、ストアとshow()「DisplayGrids」ビューが必要になります。autoload: falseログインするまでストアが試行およびロードされないように、ストアを に設定する必要があります。

いっそのこと: このすべてを 1 つのタスクとして取り組まないでください。分解してください。ログイン フォームを使用してビューポートの作成に取り組みます。このフォームを閉じると、プレーン テキストのパネルが表示されます。それが機能するようになったら、ストアとグリッドをいじり始めることができます。そうしないと、物事を効率的に行う能力を損なう複数の注意散漫に遭遇する可能性があります (cannot read property 'buffered'エラー メッセージなど)。

于 2013-03-02T19:03:06.250 に答える