ExtJS主应用内嵌多子应用交互异常：子应用被覆盖问题排查

问题场景 #

在ExtJS主应用中嵌入多个子应用时，出现子应用覆盖全局命名空间的问题。示例代码如下：

Ext.application({
    name : 'Parent app',
    launch : function() {

        Ext.application({
            name: 'ChildApp1',
            sayHello: function(){
                console.log('ChildApp 1');
            }
        });

        Ext.application({
            name: 'ChildApp2',
            sayHello: function(){
                console.log('ChildApp 2');
            }
        });
    }
});

尝试跨应用动态调用指定子应用方法时，总是执行最后创建的子应用方法：

const appName = 'ChildApp1';
Ext.app.Application.instance.getApplication(appName).sayHello(); // 实际调用ChildApp2的sayHello方法

问题根源在于每次调用Ext.application()都会重写全局的Ext变量，导致最后创建的子应用覆盖之前的实例。

解决方案 #

1. 主应用内维护子应用注册表 #

在主应用里创建一个存储容器，把子应用实例存进去，后续直接从容器里取指定应用：

Ext.application({
    name : 'Parent app',
    launch : function() {
        // 初始化子应用存储对象
        this.childApps = {};

        // 创建子应用并存入注册表
        this.childApps.ChildApp1 = Ext.application({
            name: 'ChildApp1',
            sayHello: function(){
                console.log('ChildApp 1');
            }
        });

        this.childApps.ChildApp2 = Ext.application({
            name: 'ChildApp2',
            sayHello: function(){
                console.log('ChildApp 2');
            }
        });

        // 动态调用示例
        const appName = 'ChildApp1';
        this.childApps[appName].sayHello(); // 正确调用ChildApp1的方法
    }
});

2. 利用子应用命名空间挂载实例 #

每个子应用的name会生成对应的全局命名空间，在子应用的launch方法里把自身实例挂载到这个命名空间上，后续通过命名空间访问：

Ext.application({
    name : 'Parent app',
    launch : function() {
        Ext.application({
            name: 'ChildApp1',
            sayHello: function(){
                console.log('ChildApp 1');
            },
            launch: function() {
                // 将实例挂载到自身命名空间
                ChildApp1.instance = this;
            }
        });

        Ext.application({
            name: 'ChildApp2',
            sayHello: function(){
                console.log('ChildApp 2');
            },
            launch: function() {
                ChildApp2.instance = this;
            }
        });

        // 动态调用示例
        const appName = 'ChildApp1';
        window[appName].instance.sayHello(); // 正确调用ChildApp1的方法
    }
});

3. 改用Ext.create创建子应用实例 #

避免重复调用Ext.application()，改用Ext.create()直接创建子应用实例，再统一管理：

Ext.application({
    name : 'Parent app',
    launch : function() {
        const childApp1 = Ext.create('Ext.app.Application', {
            name: 'ChildApp1',
            sayHello: function(){
                console.log('ChildApp 1');
            }
        });

        const childApp2 = Ext.create('Ext.app.Application', {
            name: 'ChildApp2',
            sayHello: function(){
                console.log('ChildApp 2');
            }
        });

        // 存储实例
        this.childApps = {
            ChildApp1: childApp1,
            ChildApp2: childApp2
        };

        // 动态调用
        const appName = 'ChildApp1';
        this.childApps[appName].sayHello();
    }
});

架构合理性分析 #

直接嵌套Ext.application()的方式不合理，因为Ext.application()本身是用来初始化单根应用的方法，每次调用会重置全局应用上下文。正确的架构思路应该是：

• 主应用作为根节点，统一管理所有子应用的生命周期
• 子应用通过Ext.create()创建实例，而非重复调用Ext.application()
• 维护统一的子应用实例注册表，保证跨应用交互的准确性

内容的提问来源于stack exchange，提问作者Sergey Bogdanov