Ext Js 6+ 动态切换皮肤

在这里以ext js 6.2.1版本为例（注：需要安装Sencha Cmd，以及下载对应的sdk）

1.创建空白项目

在命令行中输入sencha -sdk D:\Code\ext-6.2.1 generate app app D:\Code\Test

D:\ASPX\ext-6.2.1 是指sdk目录

generate app app 是创建应用，这个应用的包名是app

D:\ASPX\Test       就是所创建项目的目录了

运行一下项目，效果是这样的

2.修改app.json

 {
     //使用sencha -sdk sdk地址 generate app app 目标项目地址命令生成项目
     //修改app.json后依次执行以下命令即可使用
     //::重新生成开发环境sencha app build development
     //::打包sencha app build -c
     "name": "app",
     "namespace": "app",
     "version": "1.0.0.0",
     "framework": "ext",

     /**
      * The list of required packages (with optional versions; default is "latest").
      *
      * For example,
      *
      *      "requires": [
      *          "charts"
      *      ]
      */
     "requires": [
         "font-awesome"
     ],

     /**
      * The relative path to the application's markup file (html, jsp, asp, etc.).
      */
     "indexHtmlPath": "index.html",

     /**
      * 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",
         "${toolkit.name}/src"
     ],

     /**
      * Comma-separated string with the paths of directories or files to search. Any classes
      * declared in these locations will be automatically required and included in the build.
      * If any file defines an Ext JS override (using Ext.define with an "override" property),
      * that override will in fact only be included in the build if the target class specified
      * in the "override" property is also included.
      */
     "overrides": [
         "overrides",
         "${toolkit.name}/overrides"
     ],

     /**
      * Fashion build configuration properties.
      */
     "fashion": {

         "inliner": {
             /**
              * Disable resource inliner. Production builds enable this by default.
              */
             "enable": false
         }
     },

     /**
      * Sass configuration properties.
      */
     "sass": {
         /**
          * The root namespace to use when mapping *.scss files to classes in the
          * sass/src and sass/var directories. For example, "app.view.Foo" would
          * map to "sass/src/view/Foo.scss". If we changed this to "app.view" then
          * it would map to "sass/src/Foo.scss". To style classes outside the app's
          * root namespace, change this to "". Doing so would change the mapping of
          * "app.view.Foo" to "sass/src/app/view/Foo.scss".
          */
         "namespace": "app",

         /**
          * Generated sass source settings
          *
          *      "generated": {
          *         // The file used to save sass variables edited via Sencha Inspector and Sencha Themer.
          *         // This file will automatically be applied to the end of the scss build.
          *         "var": "sass/save.scss",
          *
          *         // The directory used to save generated sass sources.
          *         // This directory will automatically be applied to the end of the scss build.
          *         "src": "sass/save"
          *      }
          *
          */

         /**
          * Comma-separated list of files or folders containing extra Sass. These
          * files are automatically included in the Sass compilation. By default this
          * is just "etc/all.scss" to allow import directives to control the order
          * other files are included.
          *
          * All "etc" files are included at the top of the Sass compilation in their
          * dependency order:
          *
          *      +-------+---------+
          *      |       | base    |
          *      | theme +---------+
          *      |       | derived |
          *      +-------+---------+
          *      | packages        |  (in package dependency order)
          *      +-----------------+
          *      | application     |
          *      +-----------------+
          */
         "etc": [
             "sass/etc/all.scss",
             "${toolkit.name}/sass/etc/all.scss"
         ],

         /**
          * Comma-separated list of folders containing Sass variable definitions
          * files. These file can also define Sass mixins for use by components.
          *
          * All "var" files are included after "etc" files in the Sass compilation in
          * dependency order:
          *
          *      +-------+---------+
          *      |       | base    |
          *      | theme +---------+
          *      |       | derived |
          *      +-------+---------+
          *      | packages        |  (in package dependency order)
          *      +-----------------+
          *      | application     |
          *      +-----------------+
          *
          * The "sass/var/all.scss" file is always included at the start of the var
          * block before any files associated with JavaScript classes.
          */
         "var": [
             "sass/var/all.scss",
             "sass/var",
             "${toolkit.name}/sass/var/all.scss",
             "${toolkit.name}/sass/var"
         ],

         /**
          * Comma-separated list of folders containing Sass rule files.
          *
          * All "src" files are included after "var" files in the Sass compilation in
          * dependency order (the same order as "etc"):
          *
          *      +-------+---------+
          *      |       | base    |
          *      | theme +---------+
          *      |       | derived |
          *      +-------+---------+
          *      | packages        |  (in package dependency order)
          *      +-----------------+
          *      | application     |
          *      +-----------------+
          */
         "src": [
             "sass/src",
             "${toolkit.name}/sass/src"
         ]
     },

     /**
      * List of all JavaScript assets in the right execution order.
      *
      * Each item is an object with the following format:
      *
      *      {
      *          // Path to file. If the file is local this must be a relative path from
      *          // this app.json file.
      *          //
      *          "path": "path/to/script.js",   // REQUIRED
      *
      *          // Set to true on one file to indicate that it should become the container
      *          // for the concatenated classes.
      *          //
      *          "bundle": false,    // OPTIONAL
      *
      *          // Set to true to include this file in the concatenated classes.
      *          //
      *          "includeInBundle": false,  // OPTIONAL
      *
      *          // Specify as true if this file is remote and should not be copied into the
      *          // build folder. Defaults to false for a local file which will be copied.
      *          //
      *          "remote": false,    // OPTIONAL
      *
      *          // If not specified, this file will only be loaded once, and cached inside
      *          // localStorage until this value is changed. You can specify:
      *          //
      *          //   - "delta" to enable over-the-air delta update for this file
      *          //   - "full" means full update will be made when this file changes
      *          //
      *          "update": "",        // OPTIONAL
      *
      *          // A value of true indicates that is a development mode only dependency.
      *          // These files will not be copied into the build directory or referenced
      *          // in the generate app.json manifest for the micro loader.
      *          //
      *          "bootstrap": false   // OPTIONAL
      *      }
      *
      */
     "js": [{
         "path": "app.js",
         "bundle": true
     }],
     //对应每个皮肤模块需要加载引入的js，因为这里都是classic版本，所以直接屏蔽掉

     /**
      * Settings specific to classic toolkit builds.
      */
     // "classic": {
     //     "js": [
     //         // Remove this entry to individually load sources from the framework.
     //         {
     //             "path": "${framework.dir}/build/ext-all-rtl-debug.js"
     //         }
     //     ]
     // },

     /**
      * Settings specific to modern toolkit builds.
      */
     // "modern": {
     //     "js": [
     //         // Remove this entry to individually load sources from the framework.
     //         {
     //             "path": "${framework.dir}/build/ext-modern-all-debug.js"
     //         }
     //     ]
     // },

     /**
      * List of all CSS assets in the right inclusion order.
      *
      * Each item is an object with the following format:
      *
      *      {
      *          // Path to file. If the file is local this must be a relative path from
      *          // this app.json file.
      *          //
      *          "path": "path/to/stylesheet.css",   // REQUIRED
      *
      *          // Specify as true if this file is remote and should not be copied into the
      *          // build folder. Defaults to false for a local file which will be copied.
      *          //
      *          "remote": false,    // OPTIONAL
      *
      *          // If not specified, this file will only be loaded once, and cached inside
      *          // localStorage until this value is changed. You can specify:
      *          //
      *          //   - "delta" to enable over-the-air delta update for this file
      *          //   - "full" means full update will be made when this file changes
      *          //
      *          "update": ""      // OPTIONAL
      *      }
      */
     "css": [{
         // this entry uses an ant variable that is the calculated
         // value of the generated output css file for the app,
         // defined in .sencha/app/defaults.properties
         "path": "${build.out.css.path}",
         "bundle": true,
         "exclude": ["fashion"]
     }],

     /**
      * This option is used to configure the dynamic loader. At present these options
      * are supported.
      *
      */
     "loader": {
         // This property controls how the loader manages caching for requests:
         //
         //   - true: allows requests to receive cached responses
         //   - false: disable cached responses by adding a random "cache buster"
         //   - other: a string (such as the build.timestamp shown here) to allow
         //     requests to be cached for this build.
         //
         "cache": false,

         // When "cache" is not true, this value is the request parameter used
         // to control caching.
         //
         "cacheParam": "_dc"
     },

     /**
      * Settings specific to production builds.
      */
     "production": {
         "output": {
             "appCache": {
                 "enable": true,
                 "path": "cache.appcache"
             }
         },
         "loader": {
             "cache": "${build.timestamp}"
         },
         "cache": {
             "enable": true
         },
         "compressor": {
             "type": "yui"
         }
     },

     /**
      * Settings specific to testing builds.
      */
     "testing": {},

     /**
      * Settings specific to development builds.
      */
     "development": {
         "watch": {
             "delay": 250
         }
     },

     /**
      * Controls the output structure of development-mode (bootstrap) artifacts. May
      * be specified by a string:
      *
      *      "bootstrap": "${app.dir}"
      *
      * This will adjust the base path for all bootstrap objects, or expanded into object
      * form:
      *
      *      "bootstrap": {
      *          "base": "${app.dir}",
      *          "manifest": "bootstrap.json",
      *          "microloader": "bootstrap.js",
      *          "css": "bootstrap.css"
      *      }
      *
      * You can optionally exclude entries from the manifest. For example, to exclude
      * the "loadOrder" (to help development load approximate a build) you can add:
      *
      *      "bootstrap": {
      *          "manifest": {
      *              "path": "bootstrap.json",
      *              "exclude": "loadOrder"
      *          }
      *      }
      *
      */
     "bootstrap": {
         "base": "${app.dir}",

         "manifest": "${build.id}.json",

         "microloader": "bootstrap.js",
         "css": "bootstrap.css"
     },

     /**
      * Controls the output directory for build resources.  May be set with
      * either a string:
      *
      *      "${workspace.build.dir}/${build.environment}/${app.name}"
      *
      * or an object containing values for various types of build artifacts:
      *
      *      {
      *          "base": "${workspace.build.dir}/${build.environment}/${app.name}",
      *          "page": {
      *              "path": "../index.html",
      *              "enable": false
      *          },
      *          "css": "${app.output.resources}/${app.name}-all.css",
      *          "js": {
      *              "path": "app.js",
      *              // This setting constrols the output language level.  Set to 'ES6' to
      *              // disable the transpiler
      *              "version": "ES5"
      *          },
      *          "microloader": {
      *              "path": "microloader.js",
      *              "embed": true,
      *              "enable": true
      *          },
      *          "manifest": {
      *              "path": "app.json",
      *              "embed": false,
      *              "enable": "${app.output.microloader.enable}"
      *          },
      *          "resources": "resources",
      *          "slicer": {
      *              "path": "${app.output.resources}/images",
      *              "enable": false
      *          },
      *          // Setting the "enable" property of this object to a Truthy value will cause a Application Cache
      *          // manifest file to be generated based on this files appCache object. This file will then be injected
      *          // into the index.html file of the built application
      *          "appCache":{
      *              "enable": false"
      *          }
      *      }
      *
      */

     "output": {
         // "base": "${workspace.build.dir}/${build.environment}/${app.name}",
         //编译后输出路径
         "base": "../webApp",
         "page": "index.html",
         "manifest": "${build.id}.json",
         // "js": "${build.id}/app.js",
         //因为示例都是classic版本，没有必要单独生成app.js可以合用一个，你可以根据实际情况去配置
         "js": "app.js",
         "appCache": {
             "enable": false
         },
         "resources": {
             "path": "${build.id}/resources",
             "shared": "resources"
         }
     },

     /**
      * Controls for localStorage caching
      *   "cache": {
      *       // This property controls whether localStorage caching of this manifest file is on or off.
      *       // if disabled no deltas will be generated during a build and full updates will be disabled
      *       "enable": false,
      *
      *       // This property allows for global toggle of deltas.
      *       // If set to a string the value will be used as the path to where deltas will be generated relative to you build.
      *       // If set to a Truthy Value the default path ok "deltas" will be used
      *       // If set to a Falsey value or if this property is not present deltas will be disabled and not generated.
      *
      *       "deltas": "deltas"
      *   }
      */

     "cache": {
         "enable": false,
         "deltas": "${build.id}/deltas"
     },

     /**
      * Used to automatically generate cache.manifest (HTML 5 application cache manifest)
      * file when you build.
      */
     "appCache": {
         /**
          * List of items in the CACHE MANIFEST section
          */
         "cache": [
             "index.html"
         ],
         /**
          * List of items in the NETWORK section
          */
         "network": [
             "*"
         ],
         /**
          * List of items in the FALLBACK section
          */
         "fallback": []
     },

     /**
      * Extra resources to be copied into the resource folder as specified in the "resources"
      * property of the "output" object. Folders specified in this list will be deeply copied.
      */
     "resources": [{
             "path": "resources",
             "output": "shared"
         },
         {
             "path": "${toolkit.name}/resources"
         },
         {
             "path": "${build.id}/resources"
         }
     ],

     /**
      * Directory path to store all previous production builds. Note that the content
      * generated inside this directory must be kept intact for proper generation of
      * deltas between updates.
      */

     "archivePath": "archive/${build.id}",

     /**
      * Build Profiles. This object's properties are each a "build profile". You can
      * add as many as you need to produce optimized builds for devices, themes, locales
      * or other criteria. Your "Ext.beforeLoad" hook (see index.html) is responsible for
      * selecting the desired build profile by setting "Ext.manifest" to one of these
      * names.
      *
      *     "builds": {
      *         "classic": {
      *             "toolkit": "classic",
      *             "theme": "theme-neptune"
      *         },
      *
      *         "modern": {
      *             "toolkit": "modern",
      *             "theme": "theme-neptune"
      *         }
      *     }
      *
      */
     //这里定义多套皮肤toolkit统一为classic
     //theme就是对应的皮肤
     //在启动时加入参数例如index.html?theme=modern
     //这里就会去找modern配置下面的toolkit和theme分别去加载js和css了

     "builds": {
         "classic": {
             "toolkit": "classic",
             "theme": "theme-triton",
             "sass": {
                 "generated": {
                     "var": "classic/sass/save.scss",
                     "src": "classic/sass/save"
                 }
             }
         },

         "modern": {
             "toolkit": "classic",
             "theme": "theme-gray",
             "sass": {
                 "generated": {
                     "var": "modern/sass/save.scss",
                     "src": "modern/sass/save"
                 }
             }
         },
         "neptune": {
             "toolkit": "classic",
             "theme": "theme-neptune",
             "sass": {
                 "generated": {
                     "var": "neptune/sass/save.scss",
                     "src": "neptune/sass/save"
                 }
             }
         }
     },

     /**
      * File / directory name patttern to ignore when copying to the builds. Must be a
      * valid regular expression.
      */
     "ignore": [
         "(^|/)CVS(/?$|/.*?$)"
     ],

     /**
      * Uniquely generated id for this application, used as prefix for localStorage keys.
      * Normally you should never change this value.
      */
     "id": "1a948c1b-4dad-4c78-8917-615ca8bb45cf"
 }

3.修改index.html

 <!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>app</title>

     <script type="text/javascript">
         var Ext = Ext || {}; // Ext namespace won't be defined yet...

         //根据theme参数切换皮肤，目前支持neptune、modern、classic三种
         Ext.beforeLoad = function (tags) {
             var theme = location.href.match(/theme=([\w-]+)/);
             theme = (theme && theme[1]) || 'classic';

             console.log('加载系统主题方案:' + theme);
             Ext.manifest = theme + '.json';

         };
     </script>

     <!-- The line below must be kept intact for Sencha Cmd to build your application -->
     <script id="microloader" data-app="1a948c1b-4dad-4c78-8917-615ca8bb45cf" type="text/javascript" src="bootstrap.js"></script>

 </head>

 <body></body>

 </html>

4.修改代码

我的需求只需要支持classic即可，所以我们修改一下代码，把classic目录中的所有文件移动到根目录即可。需要移动的文件就那么几个，就不一一叙述了，然后清空classic和modern目录下的文件。

5.编译打包

首先执行sencha app build development命令重新生成编译环境，然后执行sencha app build -c命令即可

6.运行

不管是在开发环境还是生产环境我们都可以通过?theme=皮肤名称参数来切换皮肤了

结语：这只是一个基本运用，具体扩展就需要你自己去发掘了。