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

这个代码有两个错误：

js正在测试/ app /view/testMainContainer.js
这个功能永远不会激发......

我应该如何处理这个问题的最佳结构是什么？

我接下来要做的是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置于任何函数之外，它应该可以工作。

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

1 个答案: