Ext JS动态切换主题失败，请求排查原因

问题描述 #

按照Sencha Cmd教程构建两套不同主题的Ext JS应用，主题切换功能失效。已在package/local目录生成theme-Custom主题，但无论访问http://localhost:8080/logon?theme=Logon还是http://localhost:8080/logon?theme=Logon-A，应用始终加载ext-theme-neptune主题，无法实现主题切换。

应用配置代码 #

{
    /**
     * The toolkit to use. Select either "classic" or "modern".
     */
    "toolkit": "classic",

    /**
     * The application's namespace.
     */
    "name": "Logon",

    /**
     * Comma-separated string with the paths of directories or files to search. Any classes
     * declared in these locations will be available in your class "requires" or in calls
     * to "Ext.require". The "app.dir" variable below is expanded to the path where the
     * application resides (the same folder in which this file is located).
     */
    "classpath": "${app.dir}/app",

    /**
     * The Sencha Framework for this application: "ext" or "touch".
     */
    "framework": "ext",

    /**
     * The name of the theme for this application.
     */
    "theme": "ext-theme-neptune",
    "builds": {
        "Logon": {
                    "theme": "ext-theme-neptune"
                },
    "Logon-A": {
                    "theme": "theme-Custom"
                }
    },
"bootstrap": {
    "manifest": "${build.id}.json"
    }
}

页面代码 #

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
    <title>Logon</title>
    <script type="text/javascript">
        window.GLOBAL_CONTEXTROOT = '<%= com.SystemConfig.getContextRoot() %>';
    </script>
    <script type="text/javascript">
    var Ext = Ext || {};
    Ext.beforeLoad = function (tags) {
        var theme = location.href.match(/theme=([\w-]+)/);

        theme  = (theme && theme[1]) || 'Logon';

        Ext.manifest = theme ;
        console.log(Ext.manifest);
    };
</script>


    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" type="text/javascript" src="bootstrap.js"></script>

</head>
<body></body>
</html>

可能的原因及解决步骤 #

1. 多Build构建未执行 #

• 原因：仅构建了默认主题的产物，Logon-A对应的theme-Custom主题资源和manifest文件未生成，microloader只能加载默认主题。
• 解决：执行sencha app build --all命令，确保所有定义的builds（Logon和Logon-A）都被完整构建，生成各自的manifest文件与主题资源。

2. 自定义主题包未正确编译 #

• 原因：theme-Custom主题包未完成编译，导致构建时无法生成对应的主题CSS及关联资源。
• 解决：进入package/local/theme-Custom目录，检查package.json的extends字段是否正确（例如"extends": "ext-theme-neptune"），执行sencha package build编译主题包，再重新构建应用。

3. 浏览器缓存干扰 #

• 原因：浏览器缓存了旧的bootstrap.js或manifest文件，新的主题切换逻辑无法生效。
• 解决：强制刷新页面（Ctrl+F5），或在浏览器开发者工具中禁用缓存后重新加载页面。

4. Manifest文件验证 #

• 原因：构建后的manifest文件未正确关联对应主题的资源路径。
• 解决：查看构建输出目录（如build/production/Logon）下是否存在Logon.json和Logon-A.json，检查文件内的theme配置及资源路径是否指向对应主题的CSS文件。

5. Ext.manifest设置逻辑验证 #

• 原因：需确认Ext.manifest的赋值是否被microloader正确读取。
• 解决：打开浏览器控制台，检查console.log(Ext.manifest)输出是否为预期的build id（Logon或Logon-A）；若输出正确但仍未切换主题，需验证对应manifest文件是否存在且可正常访问。

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