title: Extjs: Nested Apps
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>Is there maybe a more recommended way of doing this?</p>
  
  <p>My main app:</p>
  
  <pre><code>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
                  }]
  
              }]
          });
      }
  });
  </code></pre>
  
  <p>My Customer App: </p>
  
  <pre><code>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 &gt; panel': {
                  render: this.onPanelRendered
              }
          });
      },
  
      onPanelRendered: function() {
          console.log('The customer list was rendered');
      }
  });
  </code></pre>