第1章 认识ExtJS 1
1.1 ExtJS的精彩表现 1
1.2 ExtJS的前世今生 2
1.3 是否真的需要学习ExtJS 4
1.4 ExtJS 4.0新特性 8
1.5 ExtJS UI组件基础 10
1.6 了解一下类似技术 13
1.7 本章小结 16
第2章 开始ExtJS之旅 17
2.1 认识ExtJS的开发包 17
2.2 也从Hello world开始 18
2.3 ExtJS中的基本概念 19
2.4 非常有用的开发工具 20
2.4.1 开发插件spket 20
2.4.2 FullSource 23
2.4.3 Microsoft Script Debugger 24
2.5 ExtJS对原有JavaScript对象的扩展 25
2.5.1 Ext.Array 25
2.5.2 Ext.Date 27
2.5.3 Ext.Function 29
2.5.4 Ext.Number 30
2.5.5 Ext.String 31
2.5.6 Ext.Object 32
2.6 本章小结 33
第3章 ExtJS 4.0的基本功能 34
3.1 ExtJS组件配置说明 34
3.1.1 JSON介绍 34
3.1.2 ExtJS组件配置方式介绍 35
3.2 信息提示框组件介绍 36
3.2.1 认识Ext.window.MessageBox 37
3.2.2 Ext.MessageBox.alert() 39
3.2.3 Ext.MessageBox.confirm() 40
3.2.4 Ext.MessageBox.prompt() 41
3.2.5 Ext.MessageBox.wait() 42
3.2.6 Ext.MessageBox.show() 42
3.2.7 Ext.window.MessageBox的其他功能 45
3.3 进度条组件介绍 48
3.3.1 认识Ext.ProgressBar 48
3.3.2 手工模式的进度条 50
3.3.3 自动模式的进度条 51
3.3.4 自定义样式的进度条样式 52
3.4 实现工具栏和菜单栏 53
3.4.1 认识Ext.toolbar.Toolbar 53
3.4.2 只包含按钮的简单工具栏 54
3.4.3 包含多种元素的复杂工具栏 56
3.4.4 启用和禁用工具栏 57
3.4.5 认识Ext.menu.Menu菜单 58
3.4.6 最简单的菜单栏 58
3.4.7 创建二级或多级菜单 60
3.4.8 将更多组件加入菜单 61
3.4.9 具有选择框的菜单 62
3.5 本章小结 64
第4章 最常用的表单 65
4.1 表单及表单元素 65
4.1.1 了解Ext.form.Basic基本表单 65
4.1.2 认识Ext.form.Panel表单面板 68
4.1.3 Ext.form.field.Base基础表单字段 70
4.1.4 Ext.form.field.Text文本域 74
4.1.5 Ext.form.field.TextArea文本区 76
4.1.6 Ext.form.field.Number数字输入框 78
4.1.7 Ext.form.field.Checkbox复选框和Ext.form.field.Radio单选框 80
4.1.8 Ext.form.CheckboxGroup和Ext.form.RadioGroup 81
4.1.9 Ext.form.field.Trigger触发字段 83
4.1.10 Ext.form.field.Spinner微调字段 84
4.1.11 Ext.form.field.Picker拾取器字段 85
4.1.12 Ext.form.field.ComboBox组合框 86
4.1.13 Ext.form.field.Time时间选择框 92
4.1.14 Ext.form.field.Date日期选择框 94
4.1.15 Ext.form.field.Hidden隐藏字段 97
4.1.16 Ext.form.field.HtmlEditor编辑器字段 98
4.1.17 Ext.form.field.Display只读文本字段 101
4.1.18 Ext.form.Label标签字段 102
4.1.19 Ext.form.FieldSet字段集 103
4.1.20 Ext.form.FieldContainer容器字段 105
4.1.21 Ext.form.field.File文件上传字段 107
4.2 实现表单验证 109
4.2.1 常见的验证类型 109
4.2.2 表单验证(VType) 110
4.2.3 自定义VType验证 111
4.3 表单的提交和加载 114
4.3.1 Ext.form.action.Action基础 114
4.3.2 Ajax模式的表单数据加载 116
4.3.3 Ajax模式的表单数据提交 119
4.3.4 标准模式的表单数据提交 121
4.3.5 使用Direct技术 123
4.4 本章小结 126
第5章 面板及布局类 127
5.1 面板panel 127
5.1.1 认识Ext.panel.Panel 127
5.1.2 Ext.panel.Panel的主要功能 128
5.1.3 使用Ext.panel,Panel 131
5.2 标准布局类 136
5.2.1 Auto自动布局 136
5.2.2 Fit自适应布局 137
5.2.3 Accordion折叠布局 138
5.2.4 Card卡片式布局 139
5.2.5 Anchor锚点布局 141
5.2.6 Absolute绝对位置布局 144
5.2.7 checkboxGroup复选框组布局 145
5.2.8 Column列布局 145
5.2.9 Table表格布局 148
5.2.10 Border边框布局 149
5.2.11 Box盒布局 151
5.3 使用ViewPort 152
5.4 Ext.tab.Panel页签 153
5.5 本章小结 155
第6章 常用工具类与函数 156
6.1 非常有用的Ext.core.Element 156
6.2 Ext常用函数 158
6.2.1 Ext.onReady() 158
6.2.2 Ext.get() 160
6.2.3 Ext.select() 160
6.2.4 Ext.query() 161
6.2.5 Ext.getCmp() 163
6.2.6 Ext.getDom() 163
6.2.7 Ext.isEmpty() 164
6.2.8 Ext.namespace() 165
6.2.9 Ext.each() 165
6.2.10 Ext.apply() 166
6.2.11 Ext.encode() 167
6.2.12 Ext.htmlDecode() 168
6.2.13 Ext.typeOf() 169
6.3 Ext.core.DomHelper 169
6.3.1 Ext.core.DomHepler.append() 170
6.3.2 Ext.core.DomHelper.applyStyles() 170
6.3.3 createTemplate() 171
6.3.4 insertAfter() 172
6,3.5 insertBefore() 172
6.3.6 insertFirst() 173
6.3.7 insertHtml() 174
6.3.8 overwrite() 175
6.4 Ext.core.DomQuery 176
6.4.1 compile() 176
6.4.2 filter() 176
6.4.3 is() 177
6.4.4 jsSelect() 177
6.4.5 selectNode() 178
6.5.1 createStyleSheet() 178
6.5.2 getRule() 179
6.5.3 swapStyleSheet() 179
6.5.4 removeStyleSheet() 181
6.6 Ext.util.ClickRepeater 182
6.6.1 click() 182
6.6.2 mousedown() 183
6.6.3 mouseup() 183
6.7 Ext.util.DelayedTask提供setTimeout的简单替代 184
6.7.1 cancle() 184
6.7.2 delay() 185
6.8 Ext.util.Format提供常用的格式化方法 185
6.8.1 ellipsis() 185
6.8.2 capitalize() 185
6.8.3 date() 186
6.8.4 htmlEncode() 186
6.8.5 htmlDecode() 186
6.8.6 stripTags() 187
6.8.7 substr() 187
6.8.8 lowercase() 187
6.8.9 number() 187
6.8.10 round() 188
6.9 Ext.util.JSON编码和解码JSON对象 189
6.9.1 decode() 189
6.9.2 encode() 189
6.10 EXt.util.MixedCollection 190
6.10.1 向集合加入对象 190
6.10.2 将数组中的对象加入到集合中 191
6.10.3 移除集合中的对象 191
6.10.4 克隆集合 192
6.10.5 匹配集合中关联对象 192
6.10.6 迭代集合中的对象调用指定的方法 192
6.10.7 获取集合中的对象 193
6.10.8 该类中的其他一些有用的方法 194
6.10.9 该类中重要的事件(Events) 196
6.11 Ext.util.TaskRunner 197
6.11.1 构造函数 197
6.11.2 启动一个线程start() 198
6.11.3 停止一个线程stop() 198
6.11.4 停止所有的线程stopAll() 198
6.12 Ext.util.TextMetrics得到块状化文本规格 199
6.12.1 块的绑定 199
6.12.2 实例化对象 199
6.12.3 获取文本的高度 199
6.12.4 获取文本的宽、高 200
6.12.5 获取文本的宽度 200
6.12.6 获取指定节点内文本块的宽、高 200
6.12.7 指定文本块的宽 201
6.13 Ext.KeyNav为元素提供简单的按键处理方法 201
6.13.1 实例化一个键盘绑定对象 202
6.13.2 废弃原有键盘绑定 202
6.13.3 将废弃的键盘绑定重新生效 203
6.14 Ext.KeyMap提供更灵活强大的对按键的处理方法 203
6.14.1 构造函数 203
6.14.2 给对象添加键盘绑定 204
6.14.3 废弃已绑定到KeyMap的配置 205
6.14.4 将KeyMap或废弃的配置重新生效 205
6.14.5 获取当前KeyMap配置是否为有效 205
6.14.6 事件绑定函数 205
6.15 本章小结 206
第7章 让ExtJS开始响应事件 207
7.1 ExtJS事件与浏览器标准事件的异同 207
7.1.1 事件绑定方式 207
7.1.2 自定义事件 209
7.1.3 跨浏览器事件 210
7.2 ExtJS事件特性 211
7.2.1 Ext.util.Observable(事件基类) 211
7.2.2 举例一:addEvents、fireEvent、addListener 213
7.2.3 举例二:capture拦截器示例 214
7.2.4 举例三:addManagedListener受管事件监听器 215
7.2.5 举例四:relayEvents传播分发事件 216
7.3 Ext.EventObject(事件对象) 217
7.4 Ext.EventManager(事件管理器) 218
7.5 本章小结 220
第8章 常见Web框架的ExtJS改造 221
8.1 常见Web应用框架说明 221
8.2 简易书籍管理系统 221
8.2.1 总体设计 222
8.2.2 数据库设计 222
8.2.3 数据库脚本 222
8.2.4 工程框架设计 223
8.2.5 页面设计 231
8.3 怎样开始 232
8.3.1 页面改造 233
8.3.2 与服务器交互方式的改造 233
8.4 开始改造吧 233
8.4.1 改造主页面布局 233
8.4.2 改造菜单栏 235
8.4.3 改造书籍维护界面 237
8.4.4 改造书籍新增界面 239
8.4.5 改造书籍修改界面 246
8.4.6 改造书籍删除功能 248
8.5 换肤的实现 250
8.5.1 创建实现换肤功能的自定义组件Ext.ux.ThemeChange 250
8.5.2 查看换肤效果 251
8.6 本章小结 251
第9章 ExtJS对Ajax的支持 252
9.1 Ext.Ajax入门 252
9.1.1 Ext.Ajax.request方法详解 253
9.1.2 Ext.Ajax.request操作示例 255
9.2 Ext.ElementLoader基础 259
9.2.1 Ext.ElementLoader.load操作示例 260
9.2.2 Ext.ElementLoader其他方法示例 262
9.3 利用Ajax优化Web应用框架 264
9.3.1 多级联动菜单 264
9.3.2 天气情况查询 267
9.3.3 自动保存的网络记事本 270
9.3.4 网页计算器 272
9.4 本章小结 274
第10章 增强型模板 276
10.1 熟悉Ext.Template 276
10.2 Ext.XTemplate基础 280
10.2.1 自动填充数组和作用域切换 280
10.2.2 在子模板中访问父对象 281
10.2.3 数组索引和简单运算支持 282
10.2.4 自动渲染简单数组 283
10.2.5 使用基本的条件逻辑判断 283
10.2.6 在模板中执行任意代码 284
10.2.7 使用模板成员函数 285
10.3 在ExtJS组件中使用模板 286
10.4 使用模板的优势 288
10.5 Ext.view.View数据视图类详解 288
10.6 本章小结 291
第11章 数据模型 292
11.1 ExtJS数据模型基础 292
11.2 Model数据实体模型 293
11.2.1 创建实体 295
11.2.2 Ext.data.validations数据验证 296
11.2.3 数据代理(读取与保存) 299
11.2.4 Ext.data.HasManyAssociation一对多关系 300
11.2.5 Ext.data.BelongsToAssociation多对一关系 303
11.3 Proxy数据代理 306
11.3.1 Ext.data.proxy.Proxy 307
11.3.2 Ext.data.proxy.Client 307
11.3.3 Ext.data.proxy.Memory 307
11.3.4 Ext.data.proxy.WebStorage 308
11.3.5 Ext.data.proxy.LocalStorage 309
11.3.6 Ext.data.proxy.SessionStorage 310
11.3.7 Ext.data.proxy.Server 310
11.3.8 Ext.data.proxy.Ajax 311
11.3.9 Ext.data.proxy.Rest 315
11.3.10 Ext.data.proxy.JsonP 316
11.3.11 Ext.data.proxy.Direct 318
11.4 Reader数据读取器 319
11.4.1 Ext.data.reader.Reader 320
11.4.2 Ext.data.reader.Json 320
11.4.3 Ext.data.reader.Xml 323
11.4.4 Ext.data.reader.Array 324
11.5 Writer数据写入器 325
11.5.1 Ext.data.writer.Writer 325
11.5.2 EXt.data.writer.Json 326
11.5.3 Ext.data.writer.Xml 327
11.6 Store数据集 327
11.6.1 Ext.data.AbstractStore 327
11.6.2 Ext.data.Store 328
11.6.3 Ext.data.ArrayStore、Ext.data.JsonStore及Ext.data.XmlStore 333
11.6.4 Ext.data.DirectStore和Ext.data.JsonPStore 334
11.7 本章小结 335
第12章 Grid组件 336
12.1 表格面板Ext.grid.Panel 337
12.2 表格列Column 339
12.2.1 布尔列Ext.grid.column.Boolean 340
12.2.2 数字列Ext.grid.column.Number 340
12.2.3 日期列Ext.grid.column.Date 340
12.2.4 动作列Ext.grid.column.Action 341
12.2.5 模板列Ext.grid.column.Template 343
12.2.6 行号列Ext.grid.RowNumberer 343
12.2.7 自定义渲染函数 344
12.3 选择模式Selection 345
12.3.1 选择模式Ext.selection.Model 345
12.3.2 单元格选择模式Ext.selection.CellModel 346
12.3.3 行选择模式Ext.selection.RowModel 348
12.3.4 复选框选择模式Ext.selection.CheckboxModel 348
12.4 表格特性Feature 349
12.4.1 表格行体Ext.grid.feature.RowBody 349
12.4.2 表格汇总Ext.grid.feature.Summary 351
12.4.3 表格分组Ext.grid.feature.Grouping 352
12.4.4 分组汇总Ext.grid.feature.GroupingSummary 353
12.5 表格插件plugin 354
12.5.1 单元格编辑插件Ext.grid.plugin.CellEditing 354
12.5.2 行编辑插件Ext.grid.plugin.RowEditing 356
12.5.3 拖曳插件Ext.grid.plugin.DragDrop 357
12.6 属性表格property.Grid 359
12.7 表格分页 361
12.8 本章小结 362
第13章 Tree组件 363
13.1 树形面板Ext.tree.Panel 363
13.1.1 多列树 364
13.1.2 带复选框的树 366
13.1.3 树面板间的拖曳 366
13.2 Ext.data.TreeStore 368
13.2.1 分级加载树节点 368
13.2.2 整体加载树节点 370
13.3 本章小结 371
第14章 ExtJS与服务端框架的整合 372
14.1 XML与JSON的生成 372
14.1.1 XStream基础 372
14.1.2 JSON-lib简介 376
14.2 ExtJS与Struts的整合方式 378
14.3 ExtJS与Struts 2的整合方式 380
14.3.1 Struts 2生成JSON数据 381
14.3.2 Struts 2生成XML数据 383
14.4 本章小结 384
第15章 主题 385
15.1 Sass和Compass概述 385
15.1.1 Sass简介 385
15.1.2 Compass简介 385
15.2 ExtJS主题样式开发 387
15.2.1 基本配置文件config.rb 387
15.2.2 定制主题 388
15.3 组件UI开发 389
15.3.1 组件UI混入函数介绍 390
15.3.2 开发面板组件UI 391
15.4 本章小结 393
第16章 Ext.Direct 394
16.1 如何配置和使用Ext.Direct 394
16.1.1 支持类库的下载 394
16.1.2 配置服务器端功能 395
16.1.3 配置客户端 400
16.1.4 远程调用实例 402
16.2 本章小结 408
第17章 Draw图形 409
17.1 常见浏览器绘图技术介绍及对比 409
17.2 精彩的图形世界 410
17.3 ExtJS图形包 410
17.3.1 Ext.draw.Component图形组件详解 411
17.3.2 Ext.draw.Sprite子画面组件详解 411
17.3.3 绘制基本图形 412
17.3.4 绘制不规则图形 413
17.3.5 绘制文字 414
17.3.6 线性渐变 415
17.3.7 图形旋转 417
17.3.8 动态变换 418
17.3.9 拖曳缩放 419
17.3.10 拖曳移动 420
17.4 本章小结 421
第18章 Chart图表 422
18.1 Ext.chart图表组件概述 422
18.2 坐标轴组件详解 423
18.2.1 Ext.chart.axis.Numeric数值轴 425
18.2.2 Ext.chart.axis.Category分类轴 426
18.2.3 Ext.chart.axis.Time时间轴 426
18.2.4 Ext.chart.axis.Gauge仪表轴 427
18.2.5 Ext.chart.axis.Radial雷达轴 427
18.3 图表序列详解 427
18.3.1 Ext.chart.series.Pie饼状图 428
18.3.2 Ext.chart.series.Cartesian直角坐标系图表 431
18.3.3 Ext.chart.series.Bar条形图 432
18.3.4 Ext.chart.series.Column柱状图 433
18.3.5 Ext.chart.series.Line折线图 435
18.3.6 Ext.chart.series.Scatter散点图 437
18.3.7 Ext.chart.series.Area面积图 438
18.3.8 Ext.chart.series.Radar雷达图 440
18.3.9 Ext.chart.series.Gauge仪表图 442
18.4 在图表中使用主题 443
18.5 复合图表 446
18.6 图表与表格 446
18.7 本章小结 449
附录A 450