General functions and module custom system (cfcmms)-013 add multi-interface Theme (Theme) to Extjs6)

General functions and module custom system (cfcmms)-013 add multi-interface Theme (Theme) to Extjs6)
General functions and module custom system (cfcmms)-013 add multi-interface Theme (Theme) to Extjs6)
Only one Theme can be used in the Extjs6 project created using the sencha command. If you want to change the interface style, you need to modify the app again. json, and then use the cmd command to re-compile and generate the theme configuration item. After studying the time, we can find that multiple themetypes can be generated during the compilation with the dispatch command. In this case, we need to add some code in index.html to specify which Theme to use. Step 1: Modify app. json and add the following code to the description of the builds configuration item at the end of the file.

    builds: {      classic: {       theme: theme-classic        },       gray : {      theme : theme-gray      },      aria: {      theme: theme-aria      },                    neptune : {      theme: theme-neptune      },        crisp :{      theme: theme-crisp      },       triton: {      theme: theme-triton      }  },

You also need to find the bootstrap configuration item in app. json, and add a line of configuration as follows:

    bootstrap: {        base: ${app.dir},        microloader: bootstrap.js,        manifest: ${build.id}.json,        css: bootstrap.css    },

Add resources configuration to the output configuration item

    output: {        base: ${workspace.build.dir}/${build.environment}/${app.name},        appCache: {            enable: false        },        resources: {          path: ${build.id}/resources,          shared: resources        }    },

After modifying the preceding three items, save app. json. Then use Sencha app build developmentTo regenerate the development environment. After compilation, you will find that some folders are added under the build/development/app Directory, which are the resource files of various Theme; the corresponding Theme configuration file is also added under WebContent, such as Tron. json, neptune. json, such:
In this first step, the next step is to modify index.html so that it can decide which Theme to use based on the URL parameters. Open index.html and modify the script that has been commented out.

<Script type = text/javascript> var Ext = Ext | |{}; Ext. beforeLoad = function (tags) {var theme = location. href. match (/theme = ([w-] +)/); theme = (theme & theme [1]) | 'crisp '; console. log ('loading system theme scheme: '+ theme); Ext. manifest = theme + '. json'; }; </script> <script id = microloader data-app = e8b92f93-ab34-4781-ab41-b4b0f2a7d2c0type = text/javascript src = bootstrap. js> </script>
Now, you can use different Theme in development mode. Example:



If theme is not specified, the default Tron is used. This is the use of multi-interface themes in the development environment. If you do not want to add theme Changes to the web site, you can also use cookies to make your own theme changes, modify the theme and store it in cookies. Then, you can read the cookies at startup. The usage in release mode is basically the same as that in this mode, but the last problem is not solved. [Theme. json] files cannot be automatically generated. Now, you can only copy the app. json file, change it to the theme file, and then slightly change the configuration information in it. If someone knows how to generate various json files in publishing mode, please let us know.