Extjs: Nested Apps

Question

I'm trying to move a rather complex app to Extjs. In our current application we used a very modular approach where we structured the app into multiple sub-apps, which were loaded by a main app. I'd like to reuse this approach with Extjs using a fresh "MVC base" per sub-app.

At the moment I've got a simple main app and simple customer-sub-app. Both work nicely independently. But once I try to add the customer to main app, I just see a blank area.

Is there maybe a more recommended way of doing this?

My main app:

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
                }]

            }]
        });
    }
});

My Customer App:

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: '[email protected]'},
                {name: 'Tommy', email: '[email protected]'}
            ]
        };

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

sha sha · Accepted Answer · 2012-05-16T12:16:02

Current ExtJs MVC approach assume you have all your code inside one app. You can divide different functionality using different views, controller and stores but the app should be single.

Extjs: Nested Apps

3 Answers