sencha cmd提供对项目的创建、编译、压缩、部署等支持,本文主要介绍一下:在Spring+Hibernate+Extjs4.2技术框架下的压缩编译,前台和后台的交互采用ExtDirectSpring技术。
sencha cmd 安装步骤如下:
- 安装Jave Run-time Environment or JRE。要求版本 v1.6或以上;
- 为编辑样式,需要安装 Compass;
- 下载、安装 Sencha Cmd.http://www.sencha.com/products/sencha-cmd/download/
- 下载并解压缩 Ext JS SDK or Sencha Touch SDK.
sencha cmd 入门参照如下网址:http://blog.csdn.net/zhangxin09/article/details/8147631
在compile模式下,如果想利用sencha cmd 的配置文件,需将.sencha 文件考到web根目录下,或者直接在compile命令中配置编译源路径。如:
.sencha/app/sencah.cfg文件,设置app.classpath编译源文件路径。app.classpath=${app.dir}/app,${app.dir}/app.js,${app.dir}/juliet,${app.dir}/ext/src
参考ExtJs4.2版本,sencha cmd编译压缩的命令如下:
sencha compile -classpath=ext/src,js page -yui -in index.php -out build/index.php
This command performs the following steps:
The -classpath switch provides the compiler with all of the folders containing source code to be considered, in this case, the "ext/src" and "js" folders.
The compiler's page command then includes all of the script tags in "index.php" that are contained in the x-compile block.
Given all of the contents of "ext/src", "js", and "index.php", the compiler analyzes the JavaScript code and determines what is ultimately needed by "index.php".
A modified version of "index.php" file is written to "build/index.php".
All of the JavaScript files needed by "index.php" are concatenated, compressed using the YUI Compressor, and written to the single file "build/all-classes.js".
在上述技术框架中,采用ExtDirectSpring技术,压缩编译存在一个难点,就是Ext.data.Model中的proxy方法无法进行编译。如下图所示:
针对上述问题采用分文件进行编译,编译步骤如下:
1、只编译model 模块,命令如下:
sencha compile exclude -all and include -namespace Htims.model and concat -yui ext-model-all.js
2、修改controller加载model的方式,
1)在app.js文件中,显示加载所用store如下图:
2)在对应的controoler中,取消controller关联的model、和store,如下:
这样对应的controller的压缩编译命令如下:
sencha compile exclude -namespace Htims.model and and exclude -namespace Htims.store and exclude -namespace Ext and concat -yui ext-app-all.js
在步骤1、2完成后将生成ext-model.js和ext-app-all.js文件, 在index.jsp中进行引用。
注: 1、利用ExtDirectSpring技术动态产生的api-debug.js文件按无法压缩,直接在index.jso中引用。
2、修改后的controller现在没有绑定对应的store和model,只绑定了view,可通过view、store、model的命名规范,从view的名字获取相应的store和model名,进行绑定。
3、在这种情况下,实际上store文件未进行压缩编译。