General features and Module customization System (CFCMMS) -007extjs configuration files and custom UI

General function and Module customization system (CFCMMS)-007Extjs configuration files and custom UI

First, in the auto-generated project, the file App.json is the entire foreground system configuration file, you can add or modify the configuration parameters to complete the corresponding functions. Some of the parameters for this file are as follows:

{"Name": "Cfcmms",//Project Namespace "version": "1.0.0.0",//Project version number "Indexhtmlpath": "index.html",//Project Home "Classpath": [//  Source code and Class library path "app", "${toolkit.name}/src"], "Overrides": [...], "framework": "EXT",//Framework Library Name "Toolkit": "Classic",//Only classic Frame "theme": "Theme-triton",//Interface theme "requires": [//library and function required to use "font-awesome"], "s "": {},//can be compiled into the system of sass definition "JS": [{//each JS file loading settings "path": "App.js", "bundle": true}], "C         Lassic ": {...},//classic framework library file" CSS ": [...],//all CSS" loader "that need to be added to the system: {//Cache settings for dynamically loading Files" cache ": false, "Cacheparam": "_dc"}, "production": {...},//build some settings for the release package "development": {"tags": []}, "bootstrap": {...},//system bootloader Settings "Output": {//settings for various publishing files "base": "${workspace.build.dir}/${build.environment}/${app.name}", "APPCAC He ": {" Enable ": false}}," resource ": {//definitions of various other additional resource files" paths ": [" Resources "," ${toolkit.name}/resourceS "]}} 

Second, to join the internationalization of the settings, so that all kinds of information are used in Chinese. Modify the requires option in App.json, add Ext-locale in it, and save the file after adding a new option setting, as shown below.

    "Requires": [        "Font-awesome",        "Ext-locale"    ],    "locale": "ZH_CN",

After the browser refreshes the page, we find that the message has not been changed to Chinese because the configuration information in bootstrap has not been updated. In CMD or terminal, the metadata (i.e. bootstrap) of the system can be updated by executing the following command in the WebContent directory.

Macbook:webcontent jiangfeng$ Sencha App Refresh

After you start the Web service, refresh the page in the browser to see the menu below the grid's column displaying the Chinese information.

Third, the interface theme: Modify the theme simply modify the "theme" parameter in the App.json. For example, change theme to classic style.

"Theme": "Theme-classic",

After modifying the style, you need to regenerate the corresponding CSS file of the system, because the project CSS file is in the System publishing directory/build/production/cfcmms/resources, so after changing the theme, You need to build a publishing project to re-generate the CSS file based on the theme settings. In CMD or terminal, execute the following command in the WebContent directory.

After you start the Web service, refresh the page in the browser to see that the theme has been modified.

Since the theme is generated based on the theme definition of the configuration file, how to implement the free switch of the interface theme in the project using the Sencha cmd compilation becomes a new problem, and there is a point to know.

Iv. change the CSS settings of the control by SCSS. In an auto-generated project, TabPanel is not a style in the default theme, but instead specifies a UI: ' Navigation ' property, below a diagram that outlines how this property is defined and is in effect, see the Sencha official documentation for details.

In the description, two settings have been modified, the background of the selected tab and the background of the Panel header have been modified. After saving the changes, you will have to perform the Sencha app build--clean development command to regenerate the CSS before it is displayed correctly in the browser.

v. Project RELEASE Products: in use Sencha App Build after the command, the Build/production directory will be generated to publish the foreground JS and CSS optimized and compressed files. The App.js is the collection of all the classes in the ExtJS Framework library and the source files that you have compiled, so that when the system loads, all the JS files are loaded at once, and the cache is used for the second time. In the resources directory, all the CSS, fonts, images and other resource files are saved.

to run this project, the published product can be in the browser to enter the following address: http://localhost:1841/build/production/cfcmms/

At this point, a Sencha cmd automatically generated by the project I know everything is written in brief, if there are omissions or shortcomings, please keep abreast pointed out.

readers interested in the system can join the QQ group: 386100815; Any suggestions or comments on this system can be keep abreast reply, or e-mail[email protected]and I'll be in touch.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

General features and Module customization System (CFCMMS) -007extjs configuration files and custom UI