父子应用程序模型；将整个应用程序加载到容器中

Question

如何在“父”应用程序中加载“子”应用程序？

我有一个名为Frame的主应用程序和几个子应用程序。该框架具有边框布局。左边有一些按钮(如菜单)来加载其他项目。在中心有一个容器，用于我的子项目。框架项目具有默认的mvc结构。

在文件夹中，我放置了一个Test应用程序。也是默认结构。

/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

就像这样。

现在我想从框架中的一个按钮加载一个子项目。

所以我的功能应该是这样的：

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

对于这个代码，有两件事是错误的：

1. js在test/app/view/testMainContainer.js中
2. 这个功能从不开火..。

什么是最好的结构和我应该如何处理这一点？

接下来我要做的是在testMainContainer中对控制器、模型、存储和视图进行需求，并在需要时自动加载它们。

Answer 1

要做到这一点，有各种战略。

关于标题问题，您可能想看看SubAppDemo -米切尔·西蒙斯，它演示了如何在应用程序中加载子应用程序。

一种类似但又不同的方法是根据请求动态加载控制器。下面是我要做的代码(应用程序对象的一部分)：

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;
},

当控制器被动态加载时，它的所有模型和存储也被动态加载。在我的示例中，我总是显式地创建控制器的第一个视图(这意味着视图也被动态加载)，并将其注入控制器的view属性(控制器代码)：

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

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

关于您的代码，我不知道为什么您的函数会首先启动。但是，如果将Ext.require放在任何函数之外，则应该可以工作。