在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文件中这两个文件的路径就行了。

转载于:https://www.cnblogs.com/hainange/p/6334143.html

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

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

    将Ext JS 5应用程序导入Web项目中 相关资料: http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html 效 ...

  2. 《人人都玩开心网:Ext JS+Android+SSH整合开发Web与移动SNS》销售排名第4,发篇ExtJS的文章(拖放树结点)庆祝下

    <人人都玩开心网:Ext JS+Android+SSH整合开发Web与移动SNS>一书上架短短几天,就进入了互动网计算机类销售总排名第4的好成绩(见下图).现发篇Ext JS的技术文章庆祝 ...

  3. 小程序和Web项目的区别

    小程序和Web项目的区别 运行环境不同: 微信小程序只能通过微信打开 web项目可以通过多个终端的浏览器打开 项目规模不同: 微信小程序一般是小应用级别的,大小限制为2M,否则上传不了审核 Web项目 ...

  4. html整个项目怎么导出来,怎样将jquery导入web项目中?

    怎样将jquery导入web项目中?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 将jquery导入web项目中的方法 导入jquery文件 在页面中使 ...

  5. eclipse导入web项目出现红色叉叉

    今天在导入web项目的时候,补齐完缺失的jar包之后项目上还是有个红色的叉叉,而且不影响代码运行 1:原因: 可能是项目曾经在weblogic或者tomcat上运行过 2:解决办法 在项目下的.set ...

  6. eclipse导入java web项目_Eclipse中轻松导入web项目的方法

    今天介绍的是Eclipse中轻松导入web项目的方法,相信通过了解Eclipse中轻松导入web项目的操作步骤,大家对Eclipse编程工具一定会有更多的了解的! Eclipse中轻松导入web项目的 ...

  7. eclipse导入web项目出现红叉

    导入web项目有红叉时可能是path环境不支持需要配置自己电脑的path,所以需要build path 出现java代码错误或者-jsp文件出错(https://img-blog.csdnimg.cn ...

  8. idea导入web项目教程

    idea导入web项目教程 导入web工程 直接选择要打开的工程,new window file->Project Setting->Project 注意选择jdk(我的是1.8版本) f ...

  9. Eclipse导入Web项目代码报错解决方案

    Eclipse导入Web项目代码报错解决方案 我相信很多人在开发中导入别人的项目时,Web项目导入Eclipse中项目出现报错(左上角有红叉).开发环境:J2EE5+JDK8,IDE使用Eclipse ...

  10. 如何通过eclipse导入web项目

    如何通过eclipse导入web项目 通过eclipse导入web项目的相关流程. [1]打开eclipse,单击左上角的File,File–>Import [2]打开General–>E ...

最新文章

  1. 原创 | 常见损失函数和评价指标总结(附代码)
  2. 透彻影像王书浩:三易其辙与功不唐捐
  3. arcgis 快速制图插件_51GIS学院|ArcGIS空间数据分析系列课程的27个视频
  4. FZU 2159 WuYou
  5. 关于软件项目工作量估算的若干问题
  6. 汇编解析(3)-nasm基础、物理地址
  7. Nginx+memcached+tomcat配置集群session共享负载均衡
  8. 初学者如何选择合适的机器学习算法(附算法速查表)
  9. Android实用笔记——使用Spinner实现下拉列表
  10. 动画-animation
  11. LeetCode 872叶子相似的树-简单
  12. mysql数据库连接异常,mysql连接数据库时处理连接异常
  13. python 中的 del 使用方法
  14. 局域网内如何设置多个ip地址分配
  15. BZOJ4458: GTY的OJ
  16. [Alpha阶段]发布说明
  17. Android的异步多线程消息处理机制
  18. 【python】ssh密码字典攻击
  19. 快速清洗数据库数据(数据脱敏方案)
  20. 沪江快速手机打字软件下载

热门文章

  1. 虚拟机IP更换后 weblogic无法启动 java.net.BindException: 无法指定被请求的地址
  2. viewport原理和使用和设置移动端自适应的方法(移动适应电脑)
  3. LaTeX常用的符号
  4. Android 设计模式实战之关于封装计费代码库的策略模式详谈
  5. 自己编译nvm-window,解决无法修改镜像下载node很慢的问题!
  6. 用C#,SQL Server编写的音乐播放软件
  7. ecshop数据库操作类
  8. Windows下安装postgresql_psycopg2时出现 Unabled to find vcvarsall.bat 的解决办法
  9. ubuntu18.04新体验
  10. linux命令详解——sar