ExtJS 4 入门
ExtJS 4 入门
这次我们来介绍一下ExtJS 4 ：
1. 需求
1.1 浏览器
ExtJS 4支持所有主流浏览器，这个就不用说了
如果需要调试，推荐使用一下的浏览器
Chrome
Safari
Firefox
以上都请用最新版吧
1.2 服务器
作为Web开发工程师，如果你不会弄个server说明你不合格，所以还是搭建个本地Apache吧，就不多说了
1.3 ExtJS 4 SDK
去官网下载最新版的压缩包，解压缩到你的web服务器根目录(作为web开发工程师你自己应该找到这个目录)，如果解压出来的目录不是extjs，你可以重命名为extjs，然后访问http://localhost/extjs/index.html看到欢迎页面就对了
2. 程序架构
2.1 目录结构
推荐下面这种目录结构(非强制，如果你足够懂和自信)
- appname
- app
- namespace
- Class1.js
- Class2.js
- ...
- extjs
- resources
- css
- images
- ...
- app.js
- index.html
appname 包含所有程序代码，是根目录
app 包含所有类，按包的规则命名子目录
extjs ExtJS 4 SDK
resources CSS 图片等 资源文件
index.html 入口文件
app.js 程序入口
暂时先不用把这些目录都记住，先通过最简单的方式做一个hello world程序，创建一个“Hello Ext”程序，在web服务器根目录下创建一个目录helloext，并创建两个文件：
- helloext
- app.js
- index.html
然后把ExtJS SDK 解压到helloext目录并重命名为extjs，然后在index.html中输入以下内容
<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-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
extjs/resources/css/ext-all.css 包含了所有样式
extjs/ext-debug.js 包含了最基础的一些类，ExtJS 4 Core核心部分
app.js 包含程序逻辑
在app.js中输入以下内容
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
完成了以上工作，打开浏览器访问http://localhost/helloext/index.html会看到一个Panel，Panel的title是”Hello Ext”
2.2 动态加载
打开浏览器的控制台，刷新以下页面，会看到如下的信息
ExtJS 4 实现了动态按须加载，上面的例子里，Ext.create创建了一个Ext.container.Viewport的实例，Ext.create调用时，loader会首先检查Ext.container.Viewport类是否已经定义。如果没有定义，loader会自动加载对应文件。上面的例子里面Viewport.js最后成功加载了，但是还是有个warning，因为调用Ext.create时再加载，会卡住程序一小会儿直到对应文件加载完毕，如果加载的多，卡顿可能比较明显。可以用require的方式保证最基础的依赖加载完毕再运行app。
在Ext.application 语句前加上：
Ext.require('Ext.container.Viewport');
这样可以保证app运行前加载完Viewport，就不会出现warning
2.3 引入库的方法
解压开ExtJS 4 SDK之后可以得到下面这几个库文件：
ext-debug.js 这个文件只在开发时使用，它只提供最核心的类让程序可以运行，任何附加的类都通过动态加载引入（会造成n多请求，所以发布应用的时候不要用这个）
ext.js 这个文件功能和ext-debug.js一致，但是是用于对外发布的，它和app-all.js一起使用（见第三节）
ext-all-debug.js 这个文件包含ExtJS全部内容，全部class，它可以像ExtJS 3那样使用，可以减少学习成本，官方还是推荐ext-debug.js这种引入了新机制的方式
ext-all.js 这是ext-all-debug.js的压缩版本，内容跟其一致，可用于发布，但是它包含所有内容，官方不推荐，具体可参见第三节按须打包的方法
3. 发布
新引入的Sencha SDK Tools（点此下载）让ExtJS 4的发布更容易（这是官方说法，我不这么认为），这个工具可以根据依赖进行打包，具体操作如下
安装好SDK Tools之后，打开命令行终端，切换到应用跟目录
cd path/to/web/root/helloext
在这里执行一个简单的命令，可以生成一个jsb3文件，这文件有描述依赖的作用
sencha create jsb -a index.html -p app.jsb3
如果有服务器端脚本，可以用下面这个命令，命令中的URL是实际的URL，比如你用php，可能就是index.php而不是index.html
sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3
这个命令搜索index.html中真正使用的依赖
生成jsb3文件之后是可以对其修改的，比如自定义一些依赖，但是大多数情况可以直接继续下面的命令
sencha build -p app.jsb3 -d .
这条命令根据jsb3文件，生成两个文件：
all-classes.js 这个文件包含app自定义的所有类，这个文件没有压缩可以方便调试，在我们的例子这个文件是空的，因为Hello Ext应用没有任何自定义class
app-all.js 这个文件是压缩过的，包含所有app代码和依赖的类，相当于一个可以用于发布的 all-classes.js + app.js
ExtJS应用是需要一个index.html的，你可根据自己的服务器端脚本去做这个入口，不一定一定要是index.html，例子中我们创建一个用于发布的index-prod.html：
<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-debug.js被替换为ext.js，app.js替换为app-all.js，访问http://localhost/helloext/index-prod.html 会看到发布版本的Hello Ext应用，可以打开浏览器控制台看看和debug版本的区别
