ExtJS4的build工具

     用extjs4开发了一个前端。ExtJS4的变化非常打,规范了ExtJS4的MVC开发模式。这下JS开发大型项目变得轻松了很多。赞!

本文记录一下extjs的打包。大部分内容来自官方文档。

实践中碰到的问题
  • 在我的项目中,-a localfile不work,-a http://xxxx就可以了。很奇怪,html/js代码中没有动态内容。官方网站对此问题的讨论见此帖:
    http://www.sencha.com/forum/showthread.php?136032-SDKTOOLS-3-buggy-Sencha-SDK-Tools
  • jsb3默认入口js是%jsb3 file name%.js。如果找不到该文件,在build的时候不报错,但是生成app-all的时候会缺少入口文件,手工修改一下jsb3文件就好了。

EXTJs打包:

sencha create jsb -a index.html -p app.jsb3
或者:
sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3
然后会得到一个jsb3文件,(JSBuilder file format) JSBuilder是Sencha自己的工具。
然后:
sencha build -p app.jsb3 -d .
然后工具会生成2个JS文件:
all-classes.js
This file contains all of your application’s classes. It is not minified so is very useful for debugging problems with your built application. In our example this file is empty because our “Hello Ext” application does not contain any classes.

app-all.js
This file is a minimized build of your application plus all of the Ext JS classes required to run it. It is the minified and production-ready version of all-classes.js + app.js.
生产环境下使用如下的文件:
<html>   <head>     <title>Hello Ext</title>     <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">     <script type="text/javascript" src="extjs/ext.js"></script>     <script type="text/javascript" src="app-all.js"></script>   </head>   <body></body> </html> 

注意:其中用ext.js代替了ext-debug.js, app-all.js 代替了app.js
最后:
快!
工具下载:

http://www.sencha.com/products/sdk-tools/download/ 

posted @ 2012-11-23 15:38  Kane_BJ  阅读(646)  评论(0编辑  收藏  举报