使用Sencha SDK Tools部署Ext JS 4.x 开发的程序

以前用该工具部署老是出错,而且还不提示错误发生的地方,尝试了几次,就放下了,这几天又想拿过来弄弄,花了我将近一天的功夫,终于弄好了(编码问题,无奈),现在拿出来和大家分享,希望能帮到和我有一样的问题的同学们。

该教程主要介绍如何使用Sencha SDK Tools来部署写好的ExtJS 4.x的程序。通常在开发的过程中我们会引入ext-all.js或者ext-debug.js,然后动态加载需要的js文件。但是,当我们的js文件较多的时候,就会增加程序的加载时间,影响运行速度。而实际情况是,当我们开发完程序进行部署时,只需要我们所真正需要的js文件即可,比如说,在我们的程序中可能没有用到Ext.chart.Chart这个类,所以我们就没有必要将它包含进来。另外,如果能把所有的js文件合并成一个单个的js文件并去掉里面的注释和空白,同时简化变量的命名的话,就可以大大减小所加载的js的大小,减少服务器的连接数。要到达这些目的就要对开发的程序进行部署(Deployment)。下面,我们就看看如何对ExtJS 4.x的程序进行部署。

  1. 程序结构

在部署之前我们有必要说一下用ExtJS开发的程序的文件组织结构。

参考链接:http://docs.sencha.com/ext-js/4-1/#!/guide/getting_started-section-2

整个程序结构如下图所示。

图1 程序结构简图

图2 实际项目的结构截图

在图1中,

appname是你整个应用程序的根目录,对应于图2中的D:\...\ExtJS\

app文件夹中包含了应用程序中的定义的类,命名规范参见ClassSystem

extjs文件夹存放Ext JS 4 SDK的所有的文件。对应于图2中的extjs文件夹。

resources文件夹存放一些CSS和图片文件。在图2中没有相对应的,而是将图片和css文件写在 了外层文件夹,分别为css和images文件夹。

index.html是整个应用程序的入口。

app.js包含整个应用程序的逻辑。(注:在图2中并没有与之对应的文件,app.js常出现在MVC模式下)。

其他文件和文件夹是一些与该程序相关的文件。

 

index.html文件中<head>中的内容如下图所示:

图3 index.html文件<head>部分

说明:

红框框住的是对ext文件的引入,以及程序的入口,这是开发过程中index.html的截图,待会儿会附上部署后的截图,可以对比一下。

2. 部署(Deployment)

 

参考文章:http://docs.sencha.com/ext-js/4-1/#!/guide/getting_started-section-3

 

有了前面的铺垫之后下面来讲一些Ext JS 4的部署,使用工具是Sencha SDK Tools

 

安装之前需要确保你的电脑上已经安装了JDK。不会配置JDK的同学可以Google或百度相应的方法,或参考http://v.youku.com/v_show/id_XMjQ4Mjg3MTYw.html配置。

 

安装完之后需要对其做一些小的修改,以保证不会出现中文乱码。

 

1)              打开安装目录,然后依次打开compact/jsbuilder/src/文件夹,用文本编辑器打开该文件夹下的Project.js文件。

 

2)              搜索“getCompressor”,将下一行的“java -jar”修改为“java -Dfile.encoding=UTF-8 -jar”,保存退出。

 

接下来就是部署了。

 

1)       打开命令行,并切换到应用程序根目录(确保路径中没有中文字符);

 

2)       运行以下命令

 

sencha create jsb -a index.html -p app.jsb3

 

                   生成jsb3文件。

 

3)       如果想做修改的话可以对jsb3文件进行编辑,一般直接执行以下命令即可:

 

sencha build -p app.jsb3 -d .

 

                   注意上面的命令中有一个英文点号,不要丢掉,它表示在当前目录生成部署文件。

 

 

         成功后,会在当前目录下生成一个all-class.js和一个app-all.js文件。前者用于调试,体积较大,后者用于部署,体积较小。如果两者体积一样大的话,可能是中间出了点小问题,可以多尝试几次。下面要做的事就是修改index.html中<head>标签里面的内容来使用我们新部署好的js文件了。截图如下:

这是我的第一篇博文,希望多与大家交流,^_^

转载于:https://www.cnblogs.com/yuezk/archive/2012/09/15/2687012.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值