Extjs: Nested Apps

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

---