前 言
EXT JS通常简称为EXT，它是一个非常优秀的Ajax框架，可以用来开发具有炫丽外观的富客
户端应用。它是一个用JavaScript编写的与后台技术无关的Ajax框架。EXT绚丽多彩的界面吸引了
许多程序员的眼球，同时也吸引了众多客户，它似乎一夜之间就迅速流行开来。对于企业应用系
统，尤其是MIS类型的系统而言，EXT非常适用。
当我们第一次使用EXT时，就被它深深地吸引住了。对于像我们这样的没有美术功底的程序
员来说，EXT为我们解决了一大难题，因为它天生拥有炫丽的外表。同时，有很多用其他技术无
法实现或极难实现的功能，却能用EXT轻易实现，比如EXT中的表格、树形、布局等控件能为我
们的日常开发工作节约大量的时间和精力，这些都坚定了我们使用EXT的决心。
我们在学习EXT的过程中做了大量笔记，记下了学习过程中的一些心得和体会，同时也写了
很多示例程序，但是从未想过会将这些资料付诸出版。EXT的参考资料很缺乏，我们发现身边很
多学习EXT的朋友都在黑暗中摸索，尤其是英文不太好的朋友，学习起来非常吃力。EXT的中文
资料就更少了，虽然有人把EXT官方的API文档中文化了，但是API文档中只有一些基础理论和简
单示例，并不能指导我们快速地去实践。我们是实用主义者，本书的最大特点就是以实例为基础，
在实例的基础上讲解EXT的各种用法。这样既便于读者理解，也方便让读者亲自实践，从而迅速
地将所学到的知识运用到实际项目中去。
本书适合有一定CSS和HTML基础的开发者阅读，它的主要目的
是让开发者能快速学会EXT，并立即付诸实践。本书中的示例代码
都是以EXT 2.2为基础的，也包含了即将发布的EXT 3.0中的新特性，
对EXT的相关知识进行了深入而全面的阐述。
EXT发布包中有一个examples目录，是专门用来放置各种演示
示例的，本书附带的所有示例
①
也可以直接放在这个目录下使用。使
用时，请将对应目录放在EXT发布包的examples目录下，可以用浏
览器打开示例HTML文件观看效果（见图0-1）。
示例中使用了localXHR.js，无需服务器就可以读取JSON数据，
从而可以直接在本地浏览大部分示例。对于那些需要后台JSP提供数
据的示例，最简单的方法是将整个EXT发布包复制到Tomcat 的
① 这些示例可以从图灵公司网站上与本书对应的页面下载。——编者注
图0-1 examples目录展开图
2 前 言
webapps目录下，启动Tomcat后，可通过浏览器访问examples下的示例。
出于对EXT的喜爱，又承蒙广大爱好EXT的朋友的错爱，我们写作了本书。如果有不恰当之
处，敬请批评指正。为了便于与读者朋友交流，我们特为本书在我们的网站www.family168.com
上开辟了专门的页面
①
。欢迎大家把对本书的意见和建议发到这个页面上来，我们会积极参与讨
论，在此深表感谢。
最后，我们要感谢所有在本书的写作期间给予我们帮助和鼓励的朋友们，还有那些志同道合
的EXT爱好者们。
徐会生 何启伟 康爱媛
2008年10月20日
① http://www.family168.com/extjs
目 录
第
1
章
EXT
概述
.........................................................
1
1.1
下载
EXT
发布包
...........................................
1
1.2
如何查看
EXT
自带的
API
和示例
.................
1
1.3
为什么有些示例必须放在服务器上
才能看到效果
..............................................
2
1.4
Hello World
..................................................
2
1.4.1
直接使用下载的发布包
..................
2
1.4.2
在项目中使用
EXT
...........................
3
1.5
为什么页面提示“找不到图片”
...............
3
1.6
辅助开发
......................................................
4
1.6.1
调试工具
Firebug
..............................
4
1.6.2
开发利器
Spket
.................................
7
1.7
本章小结
....................................................
10
第
2
章
EXT
框架基础
..............................................
11
2.1
EXT
的事件和类
.........................................
11
2.1.1
自定义事件
....................................
11
2.1.2
浏览器事件
....................................
13
2.1.3
Ext.lib.Event
..........................
13
2.1.4
Ext.util.Observable
.........................
14
2.1.5
Ext.EventManager
...................
17
2.1.6
Ext.EventObject
......................
19
2.2
EXT
的核心组件
.........................................
20
2.2.1
Ext.Component
..........................
20
2.2.2
Ext.BoxComponent
...................
22
2.2.3
Ext.Container
..........................
23
2.2.4
Ext.Panel
...................................
24
2.2.5
Ext.TabPanel
.............................
24
2.3
本章小结
....................................................
27
第
3
章 表格控件
........................................................
28
3.1
Grid
的特性简介
.........................................
28
3.2
制作一个简单的
Grid
.................................
29
3.3
Grid
常用功能详解
.....................................
32
3.3.1
部分属性功能
................................
32
3.3.2
自主决定每列的宽度
....................
33
3.3.3
让
Grid
支持按列排序
.....................
35
3.3.4
解决中文排序
................................
35
3.3.5
显示日期类型数据
........................
37
3.4
在单元格里显示红色的字、图片和按钮
.....
38
3.5
给
Grid
的行和列设置颜色
.........................
41
3.6
自动显示行号和复选框
.............................
42
3.6.1
自动显示行号
................................
43
3.6.2
复选框
............................................
44
3.7
选择模型
....................................................
45
3.8
表格视图——
Ext.grid.GridView
......
46
3.9
表格分页
....................................................
47
3.9.1
为
Grid
添加分页工具条
.................
48
3.9.2
通过后台脚本获得分页数据
.........
49
3.9.3
分页工具栏显示在
Grid
的顶部
.....
51
3.9.4
让
EXT
支持前台排序
.....................
52
3.10
后台排序
..................................................
53
3.11
可编辑表格控件——
EditorGrid
.............
55
3.11.1
制作一个简单的
EditorGrid
.........
55
3.11.2
添加一行数据
..............................
56
3.11.3
保存修改结果
..............................
58
3.11.4
验证
EditGrid
中的数据
................
59
3.11.5
限制输入数据的类型
..................
60
3.12
属性表格控件——
PropertyGrid
..............
63
3.12.1
PropertyGrid
.................................
64
3.12.2
只能看不能动的
PropertyGrid
.....
65
3.12.3
强制对
name
列排序
.....................
65
3.12.4
根据
name
获得
value
..................
66
3.12.5
自定义编辑器
..............................
66
3.13
分组表格控件——
group
.........................
66
3.13.1
分组表格简介
..............................
67
3.13.2
分组表格视图
Ext.grid.GroupingView
......
68
3.14
可拖放的表格
..........................................
69
2
目 录
3.14.1
拖放改变表格的大小
...................
69
3.14.2
在同一个表格里拖放
...................
70
3.14.3
表格之间的拖放
...........................
72
3.14.4
表格与树之间的拖放
...................
73
3.15
Grid
与右键菜单
........................................
73
3.16
本章小结
...................................................
74
第
4
章 表单与输入控件
..........................................
76
4.1
制作一个表单
.............................................
76
4.2
FormPanel
和
BasicForm
详解
................
77
4.3
EXT
支持的控件
.........................................
77
4.3.1
控件继承图
.....................................
77
4.3.2
表单控件
.........................................
78
4.3.3
基本输入控件
Ext.form.Field
........................
78
4.3.4
文本输入控件
Ext.form.TextField
...............
79
4.3.5
多行文本输入控件
Ext.form.TextArea
..................
80
4.3.6
日期输入控件
Ext.form.DateField
...............
80
4.3.7
时间输入控件
Ext.form.TimeField
...............
81
4.3.8
在线编辑器
Ext.form.HtmlEditor
.............
81
4.3.9
隐藏域
Ext.form.Hidden
..........
82
4.3.10
下拉输入框
Ext.form.TriggerField
......
82
4.4
使用表单提交数据
.....................................
83
4.4.1
EXT
默认的提交形式
.....................
83
4.4.2
使用
HTML
原始的提交形式
..........
85
4.4.3
单纯
Ajax
.........................................
85
4.5
数据校验
.....................................................
86
4.5.1
输入不能为空
.................................
86
4.5.2
最大长度和最小长度
.....................
87
4.5.3
借助
vtype
.....................................
88
4.5.4
自定义校验规则
.............................
88
4.5.5
算不上校验的
NumberField
........
88
4.5.6
使用后台返回的校验信息
.............
89
4.6
表单布局
.....................................................
90
4.6.1
默认的平铺布局
.............................
90
4.6.2
平行分列布局
.................................
91
4.6.3
在布局中使用
fieldset
..............
93
4.6.4
在
fieldset
中使用布局
..............
95
4.6.5
自定义布局：在表单中加入图片
......
96
4.7
ComboBox
、
datefield
和
timefield
详解
.......
97
4.7.1
ComboBox
简介
..............................
98
4.7.2
将
Select
转换成
ComboBox
.............
99
4.7.3
ComboBox
结构详解
......................
99
4.7.4
使用远程数据
...............................
101
4.7.5
ComboBox
的高级配置
................
102
4.7.6
监听用户选择了哪条数据
...........
104
4.7.7
使用本地数据实现省、市、县
级联
..............................................
104
4.7.8
使用后台数据实现省、市、县
级联
..............................................
107
4.8
复选框和单选框
.......................................
110
4.8.1
复选框
...........................................
110
4.8.2
单选框
Radio
.................................
111
4.9
文件上传
...................................................
112
4.10
自动把数据填充到表单中
.....................
113
4.11
本章小结
.................................................
114
第
5
章 树形结构
......................................................
116
5.1
TreePanel
的基本使用
..........................
116
5.1.1
创建一棵树
...................................
116
5.1.2
为树生枝展叶
...............................
117
5.1.3
tree
的配置
.................................
118
5.1.4
使用
TreeLoader
获得数据
........
119
5.1.5
读取本地
JSON
数据
.....................
121
5.1.6
Struts 2
的
JsonPlugin
.....................
121
5.1.7
使用
JSP
提供后台数据
.................
122
5.2
树的事件
...................................................
125
5.3
右键菜单
...................................................
126
5.4
修改节点的默认图标
...............................
127
5.5
从节点弹出对话框
...................................
128
5.6
节点提示信息
...........................................
129
5.7
为节点设置超链接
...................................
129
5.8
直接修改树节点名称
...............................
130
5.9
树形的拖放
...............................................
131
5.9.1
节点拖放的三种形式
...................
131
5.9.2
叶子不能
append
.........................
131
目
录
3
5.9.3
判断拖放的目标
..........................
132
5.9.4
树之间的拖放
..............................
134
5.10
树形过滤器
TreeFilter
......................
135
5.11
利用
TreeSorter
对树进行排序
..........
137
5.12
树形节点视图——
Ext.tree.TreeNodeUI
....................
138
5.13
表格与树形的结合——
Ext.tree.ColumnTree
....................
139
5.14
本章小结
................................................
142
第
6
章 拖放
................................................................
143
6.1
拖放简介
..................................................
143
6.2
拖放的简单应用
......................................
143
6.3
拖放组件体系
..........................................
144
6.4
拖放的事件
..............................................
146
6.5
高级拖放
..................................................
148
6.5.1
Basic
...........................................
148
6.5.2
Handle
........................................
149
6.5.3
On Top
........................................
150
6.5.4
Proxy
...........................................
151
6.5.5
Group
...........................................
152
6.5.6
Grid
.............................................
154
6.5.7
Circle
........................................
155
6.5.8
Region
........................................
157
6.6
本章小结
..................................................
158
第
7
章 弹出窗口
......................................................
159
7.1
Ext.MessageBox
..................................
159
7.1.1
Ext.MessageBox.alert()
....
159
7.1.2
Ext.MessageBox.
confirm()
................................
160
7.1.3
Ext.MessageBox.prompt()
...
160
7.2
对话框的更多配置
...................................
161
7.2.1
可以输入多行的输入框
..............
161
7.2.2
自定义对话框的按钮
..................
162
7.2.3
进度条
..........................................
162
7.2.4
动画效果
......................................
164
7.3
Ext.window
的常用属性
........................
164
7.3.1
创建一个窗口
..............................
164
7.3.2
窗口的最大化和最小化
..............
165
7.3.3
窗口的隐藏与销毁
......................
167
7.3.4
防止窗口超出浏览器
..................
167
7.3.5
设置窗口中的按钮
......................
169
7.3.6
窗口的其他配置选项
..................
170
7.4
窗口分组
..................................................
171
7.5
向窗口中放入各种控件
...........................
172
7.5.1
在窗口中加入表格
......................
172
7.5.2
在窗口中加入表单
......................
173
7.5.3
复杂布局
......................................
174
7.6
本章小结
..................................................
176
第
8
章 布局
...............................................................
177
8.1
布局的用途
..............................................
177
8.2
最简单的布局
FitLayout
...........................
179
8.3
常用的边框布局
BorderLayout
................
182
8.3.1
设置子区域的大小
......................
184
8.3.2
使用
split
并限制它的范围
............
185
8.3.3
子区域的展开和折叠
..................
187
8.4
制作伸缩菜单的布局——
Accordion
......
191
8.5
实现操作向导的布局——
CardLayout
....
192
8.6
控制位置和大小的布局
——
AnchorLayout
和
AbsoluteLayout
.............
194
8.7
表单专用的布局
FormLayout
...................
199
8.8
分列式的布局
ColumnLayout
..................
200
8.9
表格状的布局
TableLayout
......................
202
8.10
与布局相关的其他知识
.........................
204
8.10.1
超类
Ext.Conainter
的公共
配置与
xtype
的概念
.................
204
8.10.2
layout
的超类
Ext.layout.
ContainerLayout
.................
205
8.10.3
不指定任何布局时会
发生的情况
................................
206
8.10.4
使用
Viewport
对整个页面
进行布局
...................................
206
8.10.5
使用嵌套实现复杂布局
............
207
8.11
本章小结
................................................
210
第
9
章 工具栏和菜单
.............................................
211
9.1
简单菜单
..................................................
211
9.2
向菜单中添加分隔线
...............................
212
9.3
多级菜单
..................................................
213
9.4
高级菜单
..................................................
214
9.4.1
多选菜单和单选菜单
..................
214
9.4.2
日期菜单
......................................
216
评论1