将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‘,

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

时间: 2024-10-13 11:57:24

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

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

将Ext JS 5应用程序导入Web项目中 相关资料: http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html 效果图: 工程目录结构图:   准备资料: 先到官网上下载ext-5.1.0-gpl.zip然后解压,官网上的我看到buy我就没敢下载了,嘻嘻也可以到csdn上去找http://cdn.sencha.com/ext/gpl/ext-5.1.0-gpl.zip,本来想传上去的,可是说70m太大了不让传,

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

由于Ext JS 6包含了Sencha Touch,因而在应用程序结构有了些改变,Ext JS 5的方法已经不适用于新版本了.经过研究,发现6导入Web项目要比5简单. 下面来说说导入的过程. 使用Sencha Cmd创建应用程序 创建Web项目 在Web项目创建脚本目录,如scripts,直接访问路径为http://域名/scripts 将创建的应用程序目录下的文件和目录全部复制到scripts目录下 将应用程序下的Index.html目录复制到scripts目录的上一层目录,也就是能通过..

【翻译】在Ext JS 5应用程序中如何使用路由

原文:How to Use Routing in Your Ext JS 5 Apps 简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它可以在控制器内轻松的管理历史记录.前进和后退按钮是每个浏览器都会拥有的公共用户接口,现在,使用Ext JS 5在单页面应用程序中处理导航变得相当简单了. Ext JS 5路由 在Ext JS,已经可以使用Ext.

eclipse 导入web项目后,线程假死

eclipse 导入web项目后,就出现关闭后,线程还存在的情况.使用java mission control 查看发现java script indexing线程在running. 关闭js验证后,线程可以正常关闭. http://www.jb51.net/article/46642.htm 第一步:去除eclipse的JS验证:将windows->preference->Java Script->Validator->Errors/Warnings->Enable Jav

eclipse新建JAVA项目导入web项目

我也是刚接触用eclipse 下面我就还总结一下怎么在eclipse的java项目里面导入 web项目 点击 finish就完成了 导入 如果你的JAVA项目要部署到tomcat中去 就在tomcat 安装路径下找到 server.xml <Host appBase="webapps" autoDeploy="true" name="172.16.11.225" unpackWARs="true" xmlNamespac

Eclipse导入Web项目后代码不报错但项目报错(左上角有红叉)解决方案

在学习别人的项目时,导入Web项目到Eclipse中时代码不报错但项目报错(左上角有红叉).开发环境:J2EE5+JDK8,IDE使用Eclipse开发,代码文件没有任何报错,不管是java文件.jsp文件还是xml文件,总之项目下的任何文件都是正常的,没有任何报错提示,但是项目图标的左上角就是有红叉! 解决方案一:请检查build path中Libraries下的jar包是不是有报错提示. 解决方案二:请检查你的各处Java版本配置是否一致,体现在三个地方:build path中jre版本,J

在Ext JS 5应用程序中如何使用路由

简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它可以在控制器内轻松的管理历史记录.前进和后退按钮是每个浏览器都会拥有的公共用户接口,现在,使用Ext JS 5在单页面应用程序中处理导航变得相当简单了. Ext JS 5路由 在Ext JS,已经可以使用Ext.util.Histroy类来处理历史记录的变化,但在Ext JS 5,这个处理变得更容易

Ext JS 6应用程序Build后出现“c is not a constructor return new c(a[0])”的处理

概述 在对Ext JS 6的应用程序打包后,时不时会出现以下错误: 由于是压缩后出现的错误,要进行调试也无从下手,因而这个错误会令新手手足无措,不知道是怎么回事. 错误原因 造成该错误的主要原因是要创建的类在打包时没有包含在包内,又或者是类名错误造成的.我遇到的一个比较典型的错误就是在requires中使用了Ext.MessageBox而不是Ext.window.MessageBox,就会出现该错误. 解决办法 虽然知道该错误是由于类名造成的,但苦于无法知道是那个文件中的requires出现的问

eclipse导入web项目之后项目中出现小红叉解决办法

项目中有小红叉我遇到的最常见的情况: 1.项目代码本身有问题.(这个就不说了,解决错误就OK) 2.项目中的jar包丢失.(有时候eclipse打开时会出现jar包丢失的情况,关闭eclipse重新打开或者重新引入jar包就OK) 3.从外部导入的项目,项目中引用jar包的位置不对,这个在“项目右键>Bulid Path>configure Build Path>Libraries”中调整包的位置就OK. 这些都是常见的,今天要说一下下面这一种: 问题产生场景:从外部导入一个项目,前面三