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

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

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

    由于Ext JS 6包含了Sencha Touch,因而在应用程序结构有了些改变,Ext JS 5的方法已经不适用于新版本了.经过研究,发现6导入Web项目要比5简单. 下面来说说导入的过程. 使用S ...

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

    相关资料:http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html 原文地址: https://blog.csdn. ...

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

    eclipse 导入web项目后,就出现关闭后,线程还存在的情况.使用java mission control 查看发现java script indexing线程在running. 关闭js验证后, ...

  4. Eclipse 如何导入web项目

      Eclipse 如何导入web项目 CreateTime--2018年3月8日09:07:16 Author:Marydon 方法一:推荐使用 1.将web项目手动拷贝到Eclipse的工作空间下 ...

  5. Eclipse导入web项目发布项目时报Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web错误解决方案

    Eclipse导入web项目后,将web项目加载到server进行发布时,提示Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java ...

  6. Eclipse导入web项目后,run列表中没有run on server?

    Eclipse导入web项目,没有run列表中run on server? 首先确保正确安装Tomcat和JDK .找到对于web项目的文件夹,打开文件夹下.project文件 <?xml ve ...

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

    简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它 ...

  8. 【翻译】在Ext JS 5应用程序中怎样使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简单介绍 Ext JS 5是一个重要的公布版本号,它提供了很多新特性来创建丰富的.企业级的Web应用程序.MVV ...

  9. 【翻译】针对多种设备定制Ext JS 5应用程序

    原文:Tailoring Your Ext JS 5 Application for a Multi-Device World 概述 鉴于当今设备和表单因素的扩散,要针对所有这些可能性来优化应用程序已 ...

随机推荐

  1. 基于无域故障转移群集 配置高可用SQLServer 2016数据库

    基于上次的文章搭建的环境,可以在这里:http://www.cnblogs.com/DragonStart/p/8275182.html看到上次的文章. 演示环境 1. 配置一览 Key Value ...

  2. 初步配置阿里云ECS服务器

    阿里云服务器配置记录01 购买阿里云学生服务器9.9元每月 创建ubuntu64位实例系统,注意必须添加安全组设置才可远程登入(设置课访问端口及IP范围 putty 软件在windows10下远程登入 ...

  3. 牛客网编程练习之PAT乙级(Basic Level):1041 说反话

    直接分隔取反即可 AC代码: import java.util.Scanner; /** * @author CC11001100 */ public class Main { public stat ...

  4. CRM客户关系管理系统(六)

    第六章.排序和搜索功能开发  6.1.排序功能开发 (1)kingadmin_tags.py @register.simple_tag def get_sorted_column(column,sor ...

  5. Node.js TLS/SSL

    Stability: 3 - Stable 可以使用 require('tls') 来访问这个模块. tls 模块 使用 OpenSSL 来提供传输层(Transport Layer)安全性和(或)安 ...

  6. ELK学习记录一 :初识ELK

    ELK是elastic公司提供的一套完整的收集日志并分析展示的产品,分别表示Elasticsearch.Logstash和kibana. (官网截个图) 先来一段个人粗浅的认识: Elasticsea ...

  7. Java对象的创建 —— new之后JVM都做了什么?

    Java对象创建过程 1. 类加载检查 虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已经被加载.解析和初始化过.如果没 ...

  8. 安卓高级2 swipeReferenceLayout 使用案例 和完善其自定义上拉

    swipeReferenceLayout 无法完成上来加载数据所以自定义了一个类 Activity.java package qianfeng.com.swipelayoutdemo; import ...

  9. Eclipse调试(1)——基础篇

    作为使用Eclipse的程序员都会使用它的Debug.但是有不少人只会用F6.F8,其他功能知之甚少.今天我就来总结一下我在使用eclipse的debug时的一些个人经验.水平有限,不足之处还请赐教. ...

  10. WCF Restful调用跨域解决方案

    目前很多项目中CRM更多扮演一个纯后台管理系统,用户更多的操作是在移动端执行,不管是安卓还是IOS甚至是H5.这里以H5为例,CRM提供数据接口,移动web端来调用接口进行数据处理,这里就会涉及到一个 ...