Import the Ext JS 5 application into a Web project and implement localization

In ext JS 5, new scripts and style loading methods are used, which creates a little bit of a hassle in importing applications into Web projects. And for the localization of the import of files, also adopted a new way, this article will answer these questions.

Import the Ext JS 5 application into the Web project

In ext JS 5. Application scripts and styles are loaded using Bootstrap.js, and bootstrap.js is loaded with style files and scripts based on Bootstrap.json.

The problem is on this Bootstrap.json file, assuming that the Web project using IIS, the first thing you will encounter is that webserver do not agree to download the JSON file, this time, you have to solve the problem, or load will definitely be wrong.

Assuming that you study the Bootstrap.js file carefully, you will find that it is primarily used to get scripts and style files where the JS and CSS member values are in Bootstrap.json. In the self-generated Bootstrap.json file, the default path for scripts and style files is no path, that is, the same path as the home file. This way, when the home file is not in the same path as the script and the style file, the script and style are not loaded. Because there are so many script files to load in the Bootstrap.json file, it is not realistic to change the path of the files in the Bootstrap.json file directly. That's just a way to find a solution in the Bootstrap.js file.

In the Bootstrap.js file. The Ext.microloader load method reads the values of JS and CSS members in the Bootstrap.json, and then places the load path of the script and style files into an array using the following statement:

Urls.push (Resource.path);

The above statement does not make any changes to the path of the script or file, and it is placed directly into the load array. This will be in the home page file and the script is not the same path must be wrong, so to fix this problem, just to change this sentence. That is, add a proper path to the script and style you want to load. A further study of the Bootstrap.js file will now be sent to the Init method of boot. Will save the path of bootstrap.js on the home page inBoot.baseurlIn The path to the bootstrap.js is the same as the path to Bootstrap.json, meaning that the relative path of the script and style to be loaded in Bootstrap.json is the same as the relative path of the bootstrap.js, so that the code above can be loaded correctly into the script and Style has:

Urls.push (Boot.baseurl + resource.path);

The above is only to conquer the Ext JS framework file and style path, for the application itself class files, their path is still wrong, and to fix this error, very easy. You only need to add Appfolder to App.js and app\application.js to specify the path to the application waiting for the namespace. Like what. The script is placed in the Scripts folder of the Web project, the code is as follows:

Appfolder: ' Scripts/app ',

With these changes, you are able to import the application correctly into the Web project.

Localization

Because the Bootstrap.js file was used to launch the application. It is therefore not recommended to load localized files in the same way that they were previously loaded into the page directly. In addition, there may be unexpected errors when loading the application and then loading the localized file into the loading order.

In ext JS 5. To properly add localization files, you need to change the App.json file. Adding Ext-locale to the requires member array in App.json means that the application requires the localization package to be loaded, but does not specify the localization package to be loaded, so it is necessary to include the locale member to designate which localization package to load, assuming that the value is en _cn. Assuming that you are loading more than one localization package, the value can be an array, add the feature code of the localization package, and the detailed example is as follows:

    "Requires": [' Ext-locale '    ], "locale": "ZH_CN",

After you change the App.json file, you also need to run the Sencha app build command to localize.

Announced

There is still a path problem when the application is packaged using the Sencha app build command. At this time, the Bootstrap.js file will be compressed in the first page, to change it is not easy. But at this time Bootstrap.js will be app.json for script files and style files loaded based. This time the App.json file only need two script file app.js and a style file myapp-all.css, so directly change the App.json file in the path of the two files.

Import the Ext JS 5 application into a Web project and implement localization