Import Ext JS 5 applications to Web projects and implement localization. extweb

Import Ext JS 5 applications to Web projects and implement localization. extweb

In Ext JS 5, new scripts and style loading methods are used, which makes importing applications to Web projects a little effort. The import of local files also adopts a new method. This article will answer these questions one by one.

Import Ext JS 5 applications to a Web project

In Ext JS 5, bootstrap. js is used to load application scripts and styles, while bootstrap. js loads style files and scripts based on Bootstrap. json. The problem lies in Bootstrap. if you are using a Web project of IIS on a json file, the first problem you will encounter is that the Web server is not allowed to download the JSON file. At this time, you must solve this problem first. Otherwise, loading will definitely fail.

If you carefully study the bootstrap. js file, you will find that it is mainly used to obtain the js and css Member values in Bootstrap. json. In the automatically generated Bootstrap. in the json file, the default path of the script and style file is no path, that is, it is the same path as the home page file. In this way, when the home page file is not in the same path as the script and style file, the script and style cannot be loaded. Since there are many script files to be loaded in the Bootstrap. json file, it is unrealistic to directly modify the file path in the Bootstrap. json file. You can only find a solution in the bootstrap. js file.

In bootstrap. in the js file, Ext. the load method of Microloader reads Bootstrap. values of js and css members in json, and then place these values into a number group using the following statement:

urls.push(resource.path);

The preceding statement does not modify the path of the script or file, and is directly placed in the loading array. In this way, errors will occur when the homepage file and script are not in the same path, to fix this problem, you only need to modify this sentence, that is, add a proper path to the script and style to be loaded. Next, we will study bootstrap. js file, you will find that in the Boot init method, the bootstrap. the js path on the home page is saved in Boot. in baseUrl, while bootstrap. the js path is similar to bootstrap. the json path is the same, that is, bootstrap. the relative path of the script and style to be loaded in json and bootstrap. the relative paths of js are the same. Therefore, you can load the script and style correctly by modifying the above Code to the following code:

urls.push(Boot.baseUrl + resource.path);

The above only addresses the framework file and style path of Ext JS. For the class files of the application itself, their path is still incorrect. To correct this error, it is very simple, you only need. js and app \ application. add the appFolder in js to specify the path for the application to wait for the namespace. For example, if the script is placed in the Scripts directory of the Web project, the Code is as follows:

appFolder : 'scripts/app',

After the preceding modification, You can correctly import the application to the Web project.

Localization

Because bootstrap is used. js file to start the application. Therefore, we do not recommend that you load the local file directly on the page using the previous method, this loading method also has the issue of loading the application first and then loading the localized files, which may lead to unexpected errors.

In Ext JS 5, to correctly Add a localized file, you must modify the app. json file in the app. add ext-locale to the json requires member array, which means that the application requires the local package to be loaded, but it does not specifically mean the local package to be loaded. Therefore, you also need to add locale members, to specify which localization package to load. If you only load the simplified package, the value can be zh_CN. If you want to load multiple localization packages, the value can be an array, add the feature code of the localization package as follows:

    "requires": ['ext-locale'    ],"locale": "zh_CN",

After modifying the app. json file, you must execute the sencha app build command to implement localization.

Release

After the application uses the sencha app build command to package, there will still be a path problem. Then directly modify the path of the two files in the app. json file.