ExtJS中如何在子包SubApp中调用主应用MyApp的类？

问题场景 #

我有一个ExtJS经典版主应用"MyApp"，其app.json配置如下：

"namespace": "NS",
....
"requires": [
    "font-awesome",
    "SubApp"
],

主应用包含一个子包"SubApp"，其package.json配置为：

"namespace": "SubApp",
....
"requires": []

当我在子包代码中尝试引用主应用的类时：

Ext.define('SubApp.view.Window',{
   extend:'Ext.window.Window',
   title: 'SubApp Window',
   requires: ['MyApp.view.main.Primary'],
   // ... 其他配置
});

浏览器报错：

Error: [Ext.create] Unrecognized class name / alias: MyApp.view.main.Primary

但在浏览器控制台中执行相同的Ext.create('MyApp.view.main.Primary')却能正常运行。

核心原因 #

构建阶段（Sencha Cmd打包）时，子包默认不会自动包含主应用的类文件，因此requires声明无法找到对应的类；而控制台运行时，主应用的所有类已经加载到浏览器中，所以能正常访问。

解决方案 #

1. 修正命名空间配置（关键前提） #

首先检查主应用app.json的namespace是否与实际类的前缀一致：

• 如果你的类是MyApp.view.main.Primary，那么主应用app.json的namespace应该设置为"MyApp"，而不是"NS"。Sencha Cmd依赖namespace来识别类的路径，不一致会导致构建时无法定位类文件。

2. 让子包依赖主应用命名空间 #

在子包的package.json中，将主应用的命名空间添加到requires数组中，确保构建时包含主应用的类：

"namespace": "SubApp",
....
"requires": [
    "MyApp" // 替换为你的主应用实际命名空间
]

这样Sencha Cmd在构建子包时会自动包含主应用的相关类，requires声明就能正常解析。

3. 动态加载（适合无需同步初始化的场景） #

如果不想在构建时强依赖主应用类，可以使用异步动态加载，避免构建阶段的报错：

Ext.define('SubApp.view.Window',{
   extend:'Ext.window.Window',
   title: 'SubApp Window',
   
   initComponent: function() {
       this.callParent(arguments);
       
       // 异步加载主应用类，加载完成后执行回调
       Ext.require('MyApp.view.main.Primary', function() {
           var primaryComp = Ext.create('MyApp.view.main.Primary');
           // 在这里使用组件，比如添加到当前窗口
           this.add(primaryComp);
       }, this);
   }
});

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