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

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

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

在Ext JS 5，会使用bootstrap.js来加载应用程序脚本和样式，而bootstrap.js是根据Bootstrap.json来加载样式文件和脚本的。问题就在这个Bootstrap.json文件上，如果是使用IIS的Web项目，首先会碰到的问题是Web服务器不允许下载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的框架文件和样式的路径，对于应用程序本身的类文件来说，他们的路径还是错误 ，而要修正这个错误，很简单，只需要在app.js和app\application.js中添加appFolder来指定应用程序等待命名空间的路径就行了，例如，脚本是放在Web项目的Scripts目录的，则代码如下：

appFolder : 'scripts/app',

本地化

由于采用了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文件会以压缩形式放在首页里，要修改它不太容易，但这时候bootstrap.js会以app.json为脚本文件和样式文件的加载依据，而这时候的app.json文件只需要两个一个脚本文件app.js和一个样式文件MyApp-all.css，因而直接修改app.json文件中这两个文件的路径就行了。

作者: 黄灯桥
原文: http://blog.csdn.net/tianxiaode/article/details/40947617