一个ExtJS应用程序调用另一个ExtJS的APP(An Extjs App Calling ano

生成使用煎茶cmd并创建两个不同的应用程序工作区后，我只是想运行的第一个应用程序，然后点击一个按钮后，它会调用第二应用:)像一个主要的应用程序调用另一个子应用程序有没有办法做到它？ THX您的帮助

Answer 1:

您可以开发分离的模块，可以没有任何问题共同努力。这两个概念没有冲突的。

让我在这里分享我的经验。当我们在我们目前的项目启动（从临时）还有另外两个团队在开发这一段时间后，我们应该只是一个大的应用“集成”他们另外两个应用程序。你没有必要将预测结果结束一个天才，对吧？当我们听到客户希望更多的并行工作（更多的团队在开发模块）事情变得更糟。

使用I帧的第一个想法，但在PoC证明这是一个坏主意的话，我们停止了机器，并开始设计一个可插入式架构。我们这样做是很好，因为我们目前能够加载模块（我们称之为插件）孤立地开发容易。例如，看一看我们的文件夹结构的样子：

而这正是我们设定的模块，我们要加载的元数据：

这有很多优点：

模块可以并行开发的，
模块可以测试分离的，
模块可以动态加载，启用或禁用

当然，这不是ExtJS的提供开箱即用，但你可以做到这一点，因为它的价值。

所以，答案很简单：你的问题是不是application's大小，但它的struture代替。按照建议的MVC模式与自定义的文件夹结构，因为我们做的。

更新：

关于插件的元数据。应用程序的主控制器只有一个责任：加载插件。这是与此代码完成的：

discoverPlugins: function () {
    var me = this;
    Ext.each(plugins(), function (d) {
        me.loadPluginController(d.controller);
    });

    App.History.notifyAppLoaded();
},

loadPluginController: function (controllerName) {
    try {
        var controller = App.current.getController(controllerName);
        controller.init(App.current);
    } catch (e) {
        console.log(controllerName + ' controller couldn\'t be loaded.' + e);
    }
},

和每一个插件控制器充当调度程序，这是有一个历史组件监听的URL（在地址栏），当它改变，迭代插件通过插件请求处理的URL。当一个插件能够处理请求的URL的过程结束。
这是“操作”插件的调度配置：

constructor: function () {
    this.callParent(arguments);
    this.router.set({
        '!/operations/product/permissions/definition': this.viewPermissionsDefinition,
        '!/operations/product/accesslist/create': this.createProductAccessList,
        '!/operations/product/accesslist/{id}/edit': this.editProductAccessList,
        '!/operations/product/accesslist/{id}': this.viewProductAccessList,
        '!/operations/product/accesslist': this.viewProductAccessList,
        '!/operations/{...}': this.notFound,
        '!/operations': this.root
    });
}

这是历史类代码导航方法：

navigate: function (token) {
    var me = this,
        handled;

    if (token) {
        handled = false;
        for (var i = 0; i < me.routers.length; i++) {
            if (me.routers[i].processToken(token)) {
                handled = true;
                break;
            }
        }

        if (!handled) {
            App.current.fail(404, 'Resource not found.');
        }
    } else {
        App.current.gotoUrl('/servicedesk/search');
    }
},

一个重要的一点是插件只需要一个共享的组件的引用：在那里它们被呈现的中心区域：

refs: [
    { ref: 'main', selector: '#center-panel' }
],

该参考文献通过它们是“AbstractPluginController”的子类中的所有的插件控制器继承。这很重要，因为是模块，了解他们的主机供应商的唯一的事。这就是为什么我们可以并行发展。

关于AbstractPluginController，这个相同的类对所有插件控制器，用于例如一些核心功能，以加载所有他们的控制器/视图/模型是必需的，不是在这之前，这个类实现了动态控制器负载如下时：

createControllerGetters: function (controllers) {
    var me = this;
    controllers = Ext.Array.from(controllers);
    Ext.Array.each(controllers, function (controllerName) {
        var parts = controllerName.split('.'),
            idx = parts.indexOf('controller'),
            significants = parts.slice(idx + 1),
            name = significants.map(function (e) { return Ext.String.capitalize(e); }).join(''),
            fn = 'get' + name + 'Controller';

        if (!me[fn]) {
            me[fn] = Ext.Function.pass(me.getController, [controllerName], me);
        }
    });
},

getController: function (controllerName) {
    this.controllerCache = this.controllerCache || {};
    var me = this,
        cached = me.controllerCache[controllerName];

    if (!cached) {
        me.controllerCache[controllerName] = cached = App.current.getController(controllerName);
        if (cached) {
            cached.init();
            cached.on('beforedestroy', function () {
                me.controllerCache[ref] = null;
            });
        }
    }

    return cached;
},

这允许我们指定子控制器的列表（因为主控制器仅仅是一个初始化和调度）的模块了，并允许我们根据需要创建它们。

controllers: [
    'Operations.controller.ProductAccessListViewer',
    'Operations.controller.ProductAccessListEditor',
    'Operations.controller.ProductAccessListCreator'
],

总结：我认为主要点是这些：