ExtJS Web应用程序开发指南(针对Ext JS 4.0更新)
ExtJS 的前身是YUI（Yahoo User Interface）。经过不断发展与改进，ExtJS现在已经成功发布了4.0版本，并且成为构建RIA Web应用的一套最完整、最成熟的JavaScript基础库。利用ExtJS构建的RIA Web应用具有与桌面程序一样的标准用户界面和操作方式，并且能够跨不同的浏览器平台使用。ExtJS已经成为开发具有完美用户体验的Web应用选择。许 多程序员在RIA Web开发的征途中选择ExtJS作为克敌制胜的武器，因为他们可以享受ExtJS带来的类似于Win32编程的原生态快乐。
现 在用户对体验的要求越来越高。对于Web应用开发者而言，ExtJS无疑是优秀的解决方案，它能够帮助开发者快速实现良好用户界面的开发。而且由于 ExtJS是在YUI的基础上拓展出来的，在国内具有广泛的用户，再加上ExtJS又是开源的，所以ExtJS的生命力极强。
ExtJS的功能时刻吸引我们去深入探究，但由于ExtJS自身的特点，使得我们在学习它的时候会遭遇如下的诸多困惑：
- ExtJS为用户提供了功能强大的组件，但这些组件并不能满足项目***能多变的需求，如何学会扩展已有组件呢？除了扩展组件，ExtJS组件还提供了插件功能，学会插件的编写也是一个不错的选择。那么，如何编写插件呢？
- 要扩展ExtJS组件只阅读Api文档是不行的，还必须熟悉相关的组件源代码，这样才能有效地实现组件扩展，所以应该快速掌握ExtJS的源代码。可如何快速掌握呢？
- ExtJS源代码的数量和结构比较复杂，在其中大量使用了JSON对象实现功能的封装，所以熟悉JSON对象是必须的。怎样熟悉JSON对象呢？
- 如果直接使用ExtJS的原始组件要配置的内容比较复杂，学会组件式的开发方法可以大幅减少代码量，减轻维护的强度。什么是组件式的开发方法呢？
- 在ExtJS的源代码中经常出现一些不常见的语法形式，不太容易理解。怎么理解这些源代码呢？
在《ExtJS Web应用程序开发指南(第2版)》中你会找到上述所有问题的答案。本书通过各种实例，全面地介绍如何使用ExtJS来进行RIA Web开发，并对ExtJS在开发过程中与其他相关技术的结合进行了说明，最终开发出功能强大、界面标准、用户体验完美的Web应用。本书的案例来自于 ExtJS开发的实际应用，大部分是来自实际的Web 应用项目，对开发者具有极强的指导意义。
本书特色- 阅读门槛低——不要求读者对ExtJS有所了解，只要熟悉JavaScript编程，本书就能带你从头开始领略ExtJS的风采。
- 平台开发的概念——可以认为ExtJS是一种软件开发平台，而非一个普通JavaScript框架，ExtJS是用桌面程序开发思想引导基于ExtJS的Web应用。
- 来自于实践——本书中大量的案例都是实际项目情景的缩影，在讲解时穿插大量的实践经验提示，实践的指导意义强大。
- 典型场景应用——本书在讲述各章内容时穿插了一个对常见Web应用框架使用ExtJS进行改造的实例。Web应用框架是最基本的典型场景应用，每个Web开发者都会遇到。
- 包含了大量ExtJS 4.0新特性——本书是对第1版的完全升级，对ExtJS 4.0中包含的新特性进行了有重点的详细介绍，是学习ExtJS 4.0新特性的指导手册。
《ExtJS Web应用程序开发指南(第2版)》由 卫军、夏慧军和孟腊春编著。此外还要感谢王斌、张强林、万雷、张赛桥、刘军华、黄北军、陈洪军、黄中林、陈鲲、赵腾伦等人，他们为本书的出版做出了贡献。 本书由成都道然科技有限责任公司策划和审定。最后感谢Testdll、清源、Alex XRDU等多位技术专家提出的宝贵意见和建议。
限于水平和精力有限，书中疏漏之处难免，欢迎读者批评指正。为方便读者更好地理解和阅读本书，我们将《ExtJS Web应用程序开发指南(第2版)》一书中的代码与示例提供给读者，相关代码的下载地址为：www.hzbook.com或www.dozan.cn。
目录：第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() 177
6.5 Ext.util.CSS 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 本章小结 205
第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.1.1 Ext.Template使用举例 277
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 配置服务器端功能 495
16.1.3 配置客户端 400
16.1.4 远程调用实例 402
16.1.5 本章小结 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
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/16502878/viewspace-702745/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/16502878/viewspace-702745/