如何从ExtJS应用根目录外的JSP文件调用ExtJS应用？

问题背景 #

你在ExtJS应用根目录外的JSP文件中尝试调用LoginApp，当前使用的引用代码如下：

<script type="text/javascript" src="../UI-INF/LoginApp/CustomManifest.js"></script>
<script id="microloader" data-app="c320a89b-22a4" type="text/javascript" src="../UI-INF/LoginApp/bootstrap.js"></script>
<script type="text/javascript" src="../UI-INF/ext651/build/ext-all-debug.js"></script>
<script type="text/javascript" src="../UI-INF/LoginApp/app.js"></script>

但遇到了Manifest无法正确获取classic.json的加载错误，且受服务器约束无法调整JSP或ExtJS应用的位置。

正确调用方式及原因 #

核心问题在于Microloader（bootstrap.js）默认会从当前JSP的目录路径去查找Manifest文件，而你的应用资源在上级目录的LoginApp下，所以需要明确指定Manifest的路径，同时优化引用逻辑：

• 移除不必要的脚本引用：不需要单独引用ext-all-debug.js和app.js，Microloader会根据Manifest自动加载所需的ExtJS核心文件和应用代码，手动引用会导致路径冲突或重复加载。
• 给Microloader指定Manifest路径：通过data-manifest属性直接指向classic.json的正确相对路径，替代原来的data-app（如果data-app对应的路径无法正确映射的话）。

调整后的引用代码如下：

<!-- 如果CustomManifest.js是你自定义的配置文件，保留引用 -->
<script type="text/javascript" src="../UI-INF/LoginApp/CustomManifest.js"></script>
<!-- 配置Microloader，指定Manifest的正确路径 -->
<script id="microloader" 
        data-manifest="../UI-INF/LoginApp/classic.json" 
        type="text/javascript" 
        src="../UI-INF/LoginApp/bootstrap.js"></script>

如果你的CustomManifest.js已经包含了Manifest的配置覆盖，也可以在其中直接设置路径：

// 在CustomManifest.js中添加
Ext.manifest = '../UI-INF/LoginApp/classic.json';

额外注意事项 #

• 确认classic.json的路径是否正确：可以在浏览器开发者工具的Network标签中查看请求路径，验证是否能成功加载该文件。
• 如果使用Sencha Cmd生成的应用，确保classic.json中的资源路径都是相对LoginApp目录的，这样Microloader加载其他资源（如CSS、组件文件）时路径也能正确解析。

内容的提问来源于stack exchange，提问作者parv kothari