将Ext JS 5应用程序导入Web项目以及实现本地化

Posted 2020-09-20 gccbuaa

在Ext JS 5，使用了新的脚本和样式载入方式，这对于将应用程序导入到Web项目中产生了点小麻烦。而对于本地化文件的导入，也採用了新的方式，本文将一一解答这些问题。

将Ext JS 5应用程序导入Web项目

在Ext JS 5。会使用bootstrap.js来载入应用程序脚本和样式，而bootstrap.js是根据Bootstrap.json来载入样式文件和脚本的。

问题就在这个Bootstrap.json文件上，假设是使用IIS的Web项目，首先会碰到的问题是Webserver不同意下载JSON文件，这时候，就得先解决问题，不然载入肯定会出错。

假设认真研究一下bootstrap.js文件，会发现它主要用来获取脚本和样式文件的地方是Bootstrap.json中的js和css成员值。在自己主动生成的Bootstrap.json文件里，脚本和样式文件的默认路径就是没有路径，也就是与首页文件是同一路径。这样，当首页文件与脚本和样式文件不在同一路径，就载入不了脚本和样式了。因为Bootstrap.json文件里要载入的脚本文件非常多，要直接改动Bootstrap.json文件里的文件的路径，不太现实。那就仅仅能在bootstrap.js文件里找寻解决方式了。

在bootstrap.js文件里。Ext.Microloader的load方法会读取Bootstrap.json中的js和css成员的值，然后将这些值通过下面语句将脚本和样式文件的载入路径放到一个数组内：

urls.push(resource.path);

以上语句并没有对脚本或文件的路径进行不论什么改动，直接就放到载入数组里了。这样在首页文件与脚本不在同一路径的时候肯定会出错，因而，要修正这个问题，仅仅要改动这句即可了。也就是为要载入的脚本和样式加上一个合适的路径。再研究下bootstrap.js文件，会发如今Boot的init方法中。会把bootstrap.js在首页中的路径保存在Boot.baseUrl中，而bootstrap.js的路径是与bootstrap.json的路径是同样的，也就是说bootstrap.json中要载入的脚本和样式的相对路径与bootstrap.js的相对路径是一样的，因而，将上面的代码改动为下面代码就能正确载入脚本和样式了：

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

以上仅仅是攻克了Ext JS的框架文件和样式的路径，对于应用程序本身的类文件来说，他们的路径还是错误 ，而要修正这个错误，非常easy。仅仅须要在app.js和app\application.js中加入appFolder来指定应用程序等待命名空间的路径即可了。比如。脚本是放在Web项目的Scripts文件夹的，则代码例如以下：

appFolder : ‘scripts/app‘,

经过以上改动，就能够将应用程序正确的导入Web项目了。

本地化

因为採用了bootstrap.js文件来启动应用程序。因而不建议再採用之前的直接在页面中载入本地化文件的方式来载入本地化文件。并且，这种载入方式还存在先载入应用程序，再载入本地化文件的载入顺序问题，可能会出现意想不到的错误。

在Ext JS 5。要正确加入本地化文件，须要改动app.json文件。在app.json的requires成员数组中加入ext-locale，意思就是应用程序要求载入本地化包，但没详细说要载入那个本地化包，因而，还须要加入locale成员，来指定须要载入哪个本地化包，假设仅仅载入简体包，值能够是zh_CN。假设要载入多个本地化包，则值能够是数组，将本地化包的特征代码加入当中，详细样例例如以下：

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

改动app.json文件之后，还须要运行一次sencha app build命令才干实现本地化。

公布

应用程序使用sencha app build命令打包后，还是会存在路径问题。这时候，bootstrap.js文件会以压缩形式放在首页里，要改动它不太easy。但这时候bootstrap.js会以app.json为脚本文件和样式文件的载入根据。而这时候的app.json文件仅仅须要两个一个脚本文件app.js和一个样式文件MyApp-all.css，因而直接改动app.json文件里这两个文件的路径即可了。