《JavaScript凌厉开发 Ext详解与实践》的目录

第1章 开篇.... 1

1.1 网络开发浪潮..... 2

1.2 RIA三足鼎立..... 2

1.2.1 Flex和OpenLaszlo.. 3

1.2.2 Faces客户组件..... 4

1.2.3 微软Windows Presentation

Foundation/Silverlight. 4

1.3 Ajax革命..... 5

1.4 风靡世界的Ext. 6

1.5 周边生态系统..... 8

1.6 创 作 班 底..... 9

1.7 开发环境简介..... 10

1.7.1 JsEclipse.. 10

1.7.2 Aptana.. 11

1.7.3 Spket. 12

1.7.4 Dreamweaver. 13

1.7.5 Visual Studio.. 14

1.7.6 Komodo Edit. 14

1.7.7 关于JavaScript的IDE.. 14

第2章 Ext起步.... 17

2.1 获取Ext的方法..... 18

2.2 Ext运行环境..... 18

2.3 如何兼容其他JavaScript库..... 19

2.4 对服务器端的一些要求..... 20

2.5 Ext Examples例程解析..... 21

2.5.1 Grids. 21

2.5.2 Tabs. 23

2.5.3 Trees. 24

2.5.4 Layout Managers. 25

2.5.5 ComboBox.. 26

2.5.6 Froms. 26

2.5.7 Toolsbars and Menus. 28

2.5.8 Templates and DataView... 28

2.5.9 Drag and Drop.. 29

2.5.10 杂项(Miscellaneous). 29

第3章 Ext基础.... 33

3.1 使用EXT编写第一个

Ajax应用..... 34

3.2 构成用户界面的元素..... 34

3.3 获取页面元素..... 40

3.4 元素常见的使用方法..... 40

3.4.1 Ext.Element.*——常见的

“显示/隐藏”方法..... 40

3.4.2 Ext.Element.*——常见的

“内容控制”方法..... 42

3.4.3 Ext.Element.*——常见的

“操控DOM”方法..... 43

3.4.4 Ext.Element.*——常见的

“尺寸大小/定位”方法..... 44

3.4.5 Ext.Element.*——常见的

“特效动画”方法..... 45

3.4.6 Ext.Element.*——小结..... 46

3.4.7 DomHelper简介..... 46

3.5 DomQuery入门..... 48

3.5.1 元素选择符Selector. 50

3.5.2 属性选择符

Attributes Selectors. 50

3.5.3 CSS值元素选择符..... 51

3.5.4 Ext.query与Ext.Select的

使用注意事项..... 52

3.5.5 元素ID/Class知识拾遗..... 52

第4章 事件机制.... 55

4.1 事件概述..... 56

4.2 浏览器事件浅析..... 57

4.2.1 事件分类与事件处理函数..... 57

4.2.2 事件登记的4种形式..... 59

4.3 Ext中的事件..... 63

4.3.1 设计模式——观察者模式..... 63

4.3.2 何谓Event Handler?. 66

4.3.3 函数的作用域..... 69

4.3.4 小结：如何为Event Handler

自定义输入参数..... 72

4.3.5 高级组件事件..... 74

4.3.6 形形色色的事件登记途径..... 77

4.3.7 Ext.onReady事件..... 79

4.3.8 事件的颗粒控制..... 80

第5章 创建用户界面.... 83

5.1 界面组件架构..... 84

5.1.1 组件的对象模型..... 85

5.1.2 组件的生存周期..... 86

5.1.3 组件的渲染原理..... 89

5.2 布 局 功 能..... 95

5.2.1 页面布局功能概述..... 95

5.2.2 布局的介绍与种类..... 96

5.2.3 布局的调试..... 101

5.3 Grid组件..... 103

5.3.1 Grid的选择模型..... 104

5.3.2 自定义单元格的显示格式..... 105

5.3.3 通过拖拽改变行的顺序..... 110

5.3.4 Grid的分页、查询、远程

排序与通过拖拽改变分类..... 120

5.3.5 Grid的本地排序..... 130

5.4 Form表单组件..... 134

5.4.1 FormPanel、FormLayout

与BasicForm的区别..... 134

5.4.2 ColumnLayout的使用方法..... 146

5.4.3 使用AnchorLayout控制

控件宽度与高度..... 150

5.4.4 一行设置多个FiledSet的

技巧..... 152

5.4.5 Combobox的基本使用

方法..... 155

5.4.6 本地模式下动态调整

Combobox选择项..... 175

5.4.7 实现Combobox的联动..... 188

5.4.8 客户端验证..... 197

5.4.9 服务器端验证..... 203

5.4.10 验证后错误信息的

显示方式..... 208

5.4.11 Form的提交..... 212

5.4.12 Form加载编辑数据..... 218

5.4.13 上传文件..... 225

5.5 Tree树组件..... 236

5.5.1 静态树——最简单的树..... 237

5.5.2 以JSON/XML构造成树..... 240

5.5.3 事件处理模式..... 246

5.5.4 改变树的样式..... 253

5.5.5 调试动态树..... 254

5.6 DataView数据视图组件..... 264

5.6.1 通过拖拽改变图片的顺序..... 265

5.6.2 一个简单的图库管理例子..... 272

5.7 模板功能..... 283

5.7.1 Ext.Template.. 284

5.7.2 Ext.XTemplate.. 286

5.8 拖放功能..... 290

第6章 数据驱动.... 305

6.1 数据的提交与响应..... 306

6.1.1 HTML页面交换..... 306

6.1.2 Ajax请求与响应..... 310

6.2 容器类MixedCollection.. 322

6.3 数据存储基本单元Record与

DataField.. 332

6.3.1 DataField.. 334

6.3.2 Record.. 334

6.4 数据存储Store.. 339

6.4.1 数据载入..... 340

6.4.2 数据的添加..... 348

6.4.3 取得记录信息..... 354

6.4.4 排序..... 358

6.4.5 事务模式..... 359

6.4.6 查找..... 361

6.5 数据代理DataProxy.. 362

6.5.1 Ext.data.DataProxy.. 362

6.5.2 Ext.data.MemoryProxy.. 362

6.5.3 Ext.data.HttpProxy.. 364

6.5.4 Ext.data.ScriptTagProxy.. 365

6.6 数据读取器DataReader. 367

6.6.1 Ext.data.DataReader. 367

6.6.2 Ext.data.ArrayReader. 367

6.6.3 Ext.data.JsonReader. 368

6.6.4 Ext.data.XmlReader. 370

6.7 Ext.ux.DWR.. 371

6.7.1 Ext.data.DwrProxy.. 372

6.7.2 Ext.data.DwrReader. 374

6.7.3 应用页面..... 376

6.7.4 Web服务端配置..... 382

6.7.5 服务层接口..... 383

6.8 LitJson.. 386

6.8.1 JSON与对象之间的转换..... 387

6.8.2 输出JSON格式文本..... 390

6.8.3 接收和处理提交的

JSON格式文本..... 393

第7章 Ext高级应用.... 397

7.1 JavaScript闭包详解..... 398

7.1.1 闭包的概念..... 398

7.1.2 闭包成员的生命周期..... 399

7.1.3 引用而不是复制..... 400

7.1.4 闭包应用场景..... 400

7.2 面向对象的客户端脚本设计..... 401

7.2.1 从脚本语言到动态语言..... 402

7.2.2 基于类的JavaScript继承..... 404

7.2.3 Ext组件的复用..... 409

7.2.4 使用super关键字..... 415

7.2.5 使用命名空间..... 418

7.3 单页面应用程序的设计..... 420

7.3.1 单页面GUI为

我们带来了什么？..... 421

7.3.2 单页面GUI的应用情况..... 422

7.3.3 动态资源下载..... 422

第8章 扩展与插件.... 425

8.1 扩展与插件简介..... 426

8.2 扩展的写法..... 426

8.3 插件的写法..... 426

8.4 扩展与插件如何选择？..... 427

8.5 Ext编辑控件只读插件..... 427

8.6 TreeComboBox.. 434

8.7 微调扩展Spinner. 439

8.8 Property Grid.. 444

8.9 集成文本编辑器TinyMCE Editor. 449

8.10 Flash上传对话框..... 456

8.11 Ext GUI Builder. 467

8.12 小结..... 469

第9章 客户端优化.... 469

9.1 优化工具简介..... 470

9.1.1 JS Builder. 470

9.1.2 YUI compressor. 471

9.1.3 JSA.. 473

9.2 裁减Ext文件..... 475

9.3 开启服务端的HTTP压缩功能..... 476

9.3.1 Tomcat的设置..... 476

9.3.2 Apache的设置..... 476

9.3.3 IIS的设置..... 477

第10章 制定Ext 479

10.1 从Ext.BLANK_IMAGE_URL说起..... 480

10.2 实时换肤功能..... 482

10.3 本地化Ext. 484

第11章 JavaScript与HTML的调试.... 493

11.1 Firebug的基本操作..... 494

11.1.1 安装Firebug.. 494

11.1.2 开启和关闭Firebug.. 495

11.1.2 控制台Console.. 497

11.2 使用Firebug进行调试..... 499

11.2.1 源代码调试..... 499

11.2.2 CSS调试..... 504

11.2.3 脚本调试..... 504

11.2.4 DOM调试..... 505

11.3 跟踪网络传输状态..... 506

11.4 在脚本文件中加入调试命令..... 506

11.5 在IE中使用Firebug.. 508

11.5.1 DebugBar和Companion.JS

的基本操作详解..... 509

11.5.2 DebugBar和Companion.js

的安装..... 509

11.5.3 DebugBar和Companion.js

的基本操作..... 509

11.6 调试技巧..... 511

11.6.1 在Firebug中

直接调试脚本..... 511

11.6.2 测试代码运行速度..... 512

11.6.3 查看对象属性..... 513

11.7 小结..... 515

第12章 新闻管理系统.... 517

12.1 项目需求与开发背景..... 518

12.1.1 架构..... 518

12.1.2 需要使用的资源..... 518

12.2 数据库表..... 519

12.3 配置文件..... 521

12.4 登录页..... 522

12.5 主页面..... 530

12.6 用户管理页面..... 535

12.7 新闻管理页面..... 551

12.7.1 使用MyGerneration创建

新闻类别和新闻的数据层和

实体类..... 551

12.7.2 页面开发..... 554

12.8 修改密码页面..... 580

12.9 退出页面..... 581

12.10 设置权限..... 581