Ext JS动态切换主题失败

问题描述 投票:0回答:1

我想知道为什么构建2套不同主题的应用程序失败了。我按照官方教程进行操作:https://docs.sencha.com/cmd/7.8.0/guides/microloader.html#microloader__dynamic_manifest

主题-自定义已经在我的package/local中生成了

无论我的路由是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>

javascript extjs frontend extjs6 sencha-cmd
1个回答
0
投票
  1. 该帮助基于 ExtJS 5。没有即时主题切换
  2. ExtJS 5 Kitchensink 和 7 现代 Kitchensink 的处理方式有所不同。在 7 中,它们覆盖了
    :root
    变量。那是在飞行中。
  3. 构建后,您必须在根目录下提供不同的 json 文件。而且它仍然不是即时的
© www.soinside.com 2019 - 2024. All rights reserved.