最新引进的 Sencha SDK Tools可以使 Ext JS 4 程序开发较以前更加容易. Tools允许你在一个JSB3 (JSBuilder文件格式)表格中生成JS依赖关系列表,和创建一个仅包含你程序运行所需的自定义的合成文件.
在安装 SDK Tools之后, 打开 window命令窗口(cmd),进入你程序所在的目录,如下.
cd path/to/web/root/helloext
From here you only need to run a couple of simple commands. The first one generates a JSB3 file:
sencha create jsb -a index.html -p app.jsb3
无论你的服务器语言使用的是 PHP, Ruby, ASP还是其他., 你可以直接用你程序的实际URL替换index.html
:
sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3
它会扫描你的index.html
里使用的文件,然后生成一个叫 app.jsb3
的 JSB 文件. 生成JSB3可以给我们在编译之前确认修改的机会 - 如果你有自定义的文件要拷贝,这将会很有用,。但是大多数情况下,我们会使用下面的指令直接编译:
sencha build -p app.jsb3 -d .
这会创建两个基本的 JSB3 文件:
-
all-classes.js
- 此文件包含程序所有的类.它没有被压缩,目的是方便你开发调试. 我们的示例里此文件是空的,因为示例里并没有包含任何类. -
app-all.js
- 压缩版的all-classes.js + app.js
.
一个Ext JS应用程序将需要一个单独的index.html用于生产版本的应用程序. 你通常会在构建或服务器端逻辑中处理这个, 现在我们在helloext目录下创建一个新的文件 index-prod.html
:
<html>
<head>
<title>Hello Ext</title>
<linkrel="stylesheet"type="text/css"href="extjs/resources/css/ext-all.css">
<script type="text/javascript"src="extjs/ext.js">
</script><scripttype="text/javascript"src="app-all.js"></script>
</head>
<body></body>
</html>
请注意, ext-debug.js
被替换成 ext.js
,app.js
被替换成 app-all.js
. 如果你在浏览器打开http://localhost/helloext/index-prod.html, 你会看到"Hello Ext"程序的 production version.
附:
解压下载的 Ext JS 4 SDK包,你会看到如下文件:
-
ext-debug.js
- 此文件仅用于开发. 它提供了保证Ext框架运行的最小化的 Ext JS核心类. 额外的类会按2.2节的方法动态加载. -
ext.js
- 压缩板的ext-debug.js
. -
ext-all-debug.js
- 此文件包含整个Ext JS库. 此文件对缩短你的学习曲线很有帮助,虽然在实际的项目开发中适合首先考虑ext-debug.js. -
ext-all.js
- 压缩版的ext-all-debug.js.虽然它可以直接引用
, 但是我们并不推荐这种做法,因为在实际开发中,我们并不会用到所有的类. 合适的做法是为程序创建一个自定义的build文件,方法将会在第3章节叙述.