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

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 by Mitchell Simoens，它演示了如何在应用程序中加载子应用程序。

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

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 放在任何函数之外，它应该可以工作。