Question

How do I load a ‘child’ application inside a ‘parent’ application?

I have this main application called the Frame and several child applications. The frame has a border layout. On the left there are some buttons (like a menu) to load other projects. In the center there is the container for my child projects. The frame project has the default mvc structure.

Inside the folder I put a Test application. Also the default structure.

/frame/app/controller
          /view
      /test/app/controller
               /store
               /model
               /view
           /css
           /app.html
           /app.js
      /test2/app/controller
               /store
               /model
               /view
           /css
           /app.html
           /app.js
      /css
      /app.html
      /app.js

something like this.

Now I wanted to load from a button in the frame a child project.

So my function would look something like this:

function(){
   Ext.require('Test.view.testMainContainer', function(){
       var toPutInMyContainer = Ext.create('Test.view.testMainContainer');
       console.log(toPutInMyContainer);
   });
}

With this code are 2 things wrong:

1. the js is in test/app/view/testMainContainer.js
2. the function never fires…

What is the best structure an how should I approach this?

What i want to do next is inside the testMainContainer are requires for controllers, models, stores and views and I want to load them automatically when needed.

Answer 1

There are various strategies to achieve this.

With respect to the title question, you probably want to have a look at the SubAppDemo by Mitchell Simoens, which demonstrates how to load an sub application within an application.

A similar, yet different, approach is to dynamically load controller upon request. Here is my code to do (part of the application object):

loadPage: function(aControllerName)
{
    var iController = this.dynamicallyLoadController( aControllerName ),
        iPage = iController.view,
        iContentPanel = this.getContentPanel(),
        iPageIndex = Ext.Array.indexOf(iContentPanel.items, iPage);

    // If the page was not added to the panel, add it.
    if ( iPageIndex == -1 )
        iContentPanel.add( iPage );

    // Select the current active page
    iContentPanel.getLayout().setActiveItem( iPage );
},

dynamicallyLoadController: function(aControllerName)
{
    // See if the controller was already loaded
    var iController = this.controllers.get(aControllerName);

    // If the controller was never loaded before
    if ( !iController )
    {    
        // Dynamically load the controller
        var iController = this.getController(aControllerName);

        // Manually initialise it
        iController.init();
    }

    return iController;
},

When the controller is loaded dynamically, all its models and stores are also loaded dynamically. In my case, I always explicitly create the first view of the controller (which means the view is also dynamically loaded) and inject it into the controller’s view property (controller code):

init: function()
{
    this.callParent();

    // The dynamically created view is stored as a property
    this.view = this.getView(this.views[0]).create();
},

With regards to your code, I’m not sure why your function will fire in the first place. But it should work if you put the Ext.require outside any function.