I want to know why building 2 sets of applications with different themes failed. I followed the official tutorial : https://docs.sencha.com/cmd/7.8.0/guides/microloader.html#microloader_-_dynamic_manifest
theme-Custom has been generated in my package/local
Whether my route is http://localhost:8080/logon?theme=Logon or http://localhost:8080/logon?theme=Logon-A, the resulting theme is ext-theme-neptune, no theme switching
So what exactly caused the failure of switching themes?
{
/**
* 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>
