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

Source: Internet
Author: User

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.

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.