1

かなり複雑なアプリを Extjs に移行しようとしています。現在のアプリケーションでは、メイン アプリによって読み込まれる複数のサブアプリにアプリを構造化する、非常にモジュール化されたアプローチを使用しました。サブアプリごとに新しい「MVC ベース」を使用して、Extjs でこのアプローチを再利用したいと思います。

現時点では、シンプルなメイン アプリとシンプルな顧客サブアプリを用意しています。どちらも独立してうまく機能します。しかし、顧客をメイン アプリに追加しようとすると、空白の領域が表示されます。

これを行うためのより推奨される方法はありますか？

私の主なアプリ：

Ext.application({
    name: 'ISA',
    appFolder: 'app',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout:'border',
            defaults: {
                collapsible: true,
                split: false,
                bodyStyle: 'padding:15px'
            },
            items: [{
                title: 'ProcessBar',
                region: 'north',
                height: 150,
                cmargins: '5 0 0 0'
            },{
                title: 'Main Area',
                id:'desktop',
                xtype:"panel",
                collapsible:false,
                region:'center',
                margins: '5 0 0 0',
                cmargins: '0 0 0 0',
                height:300,
                items:[{
                    type:"ISA.extensions.customer",
                    height:300
                }]

            }]
        });
    }
});

私の顧客アプリ:

Ext.define('ISA.extensions.customer',{
    extend:'Ext.app.Application',
    alias:'customer',
    name: 'ISA.extensions.customer',
    appFolder: 'app',    
    controllers: [
        'Users'
    ],
    launch: function() {
        Ext.create('Ext.panel.Panel', {
            layout:'border',
            height: 400,
            renderTo:  "desktop",
            defaults: {
                collapsible: false,
                split: false,
                bodyStyle: 'padding:0px'

            },
            items: [{
                title: 'Customer App',
                region:'center',
                margins: '0 0 0 0',
                cmargins: '0 0 0 0',
                width: 175,
                minSize: 100,
                maxSize: 250,
                items: {
                    xtype: 'userlist'
                }
            }]
        });
    }
});


Ext.define('ISA.extensions.customer.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    title : 'All Users',

    initComponent: function() {
        this.store = {
            fields: ['name', 'email'],
            data  : [
                {name: 'Ed',    email: 'ed@sencha.com'},
                {name: 'Tommy', email: 'tommy@sencha.com'}
            ]
        };

        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

        this.callParent(arguments);
    }
});

Ext.define('ISA.extensions.customer.controller.Users', {
    extend: 'Ext.app.Controller',
    views: [
        'user.List'
    ],
    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {
        console.log('The customer list was rendered');
    }
});
4

3 に答える 3

2

現在の ExtJs MVC アプローチは、すべてのコードが 1 つのアプリ内にあることを前提としています。さまざまなビュー、コントローラー、ストアを使用してさまざまな機能を分割できますが、アプリは単一である必要があります。

于 2012-05-16T12:16:02.693 に答える
1

これがあなたが探しているものだと思います：https ：//github.com/mitchellsimoens/SubAppDemo ;

これが役に立たない場合は、ビュー/コントローラーの動的ロードについて多くのことを説明できます。

于 2012-05-16T15:51:20.883 に答える