前    言

富客户端程序RIA使Web表示层的技术向前迈进了一大步，开创了图形化编程的新一代先河。在它的带动下，许多优秀的RIA开发方案相继问世。这些开发方案各有千秋，但它们都或多或少地从传统桌面程序开发中汲取了营养。随着前端技术的不断进步，以及JavaScript引擎的速度改善，基于Ajax方案的Ext JS也在不断进步。Ext JS及与之相关的GXT、Ext SHARP等开发工具的推出，使快速开发，特别是即将发布的Ext 3.0及基于可视化的快速开发工具又向前迈进一大步。

本书以学习Ext JS的开发人员为基本读者，介绍了Ext 2.2的基本使用方法，以及利用HTML/CSS/JavaScript进行前端设计的方法和技巧。

内容提要    

本书的前6章属于Ext JS的基础知识，对于初学者非常重要，后面各章是针对Ajax开发中的需要进行的专项讲解，读者可以根据自己的需要和使用水平选择阅读。

第1章 Ext开篇

Flex/OpenLaszlo、Silverlight、Java Fx，看看其他的优秀RIA方案，和Ajax-based比较一下。该章内容包括RIA的概念由来、各厂商的RIA方案、Ajax方案的分析和“围绕Ext的IDE简介”。

第2章 Ext起步

从感性的认识开始接触Ext，开始正式进入Ext的世界。该章内容包括Ext自带例子的简单说明以及使用Ext前的一些注意事项等方面内容，力求让新用户有一个顺利的开始过程。

第3章 Ext基础

从最基础的元素说起，为大家展现Ext的底层架构是如何分布的。包括Ext.Element对象的用法、CSS选择器的使用和一些实用的DOM方法。

第4章 事件机制

该章中，我们从浏览器事件演变的历史以及最初级的实现机制开始说起，希望作为后来Ext高级事件内容的铺垫导引，逐级展开。

第5章 创建用户界面

该章详解了Ext各主要部件的使用方法与技巧。Ext布局、表单组件、Grid组件、Tree组件、DataView组件以及Ext模板对象一起合称“Ext六大组件对象”，意味着在使用过程中，我们经常要与这些组件打交道。

第6章 数据驱动

该章介绍Ext中数据的提交与响应方式，然后对目前最流行的数据格式XML与JSON进行深入的介绍与比较，接着继续深入探讨Ext数据驱动的核心——Ext的容器类、数据存储基本单元、数据存储类型、数据的读取方式、数据代理等。最后，我们结合目前最流行的Ajax远程框架DWR，讲解DWR如何在Ext中使用，以及如何创建基于DWR的Ext数据读取器和数据代理。

第7章 Ext高级应用

在该章中，我们将探讨“闭包”乃函数式语言这一明显特性作为切入点，深入JavaScript原理机制，并为Ext的面向对象机制做一次解剖。另外除了语言的层面，我们还向大家介绍如何在单页面的基础上提供非跳转或iframe的GUI设计，尝试在Ext实现“单一页面”的程序设计。

第8章 Ext扩展与插件

该章主要内容是为大家介绍如何开发Ext扩展和插件，以及介绍一些在Ext例子中没有提及而开发中比较常用的扩展和插件。

第9章 客户端优化

Ext-all.js文件大小接近600KB，和样式、图片等文件加起来更是会占用可观的带宽。因此采用各种优化手段去参与实施就很有必要了。该章我们主要介绍JS Builder、YUI compressor、JSA等优化工具，以及如何利用服务端GZIP压缩网络IO的功能，减少网络负荷。

第10章 定制Ext外观

该章包括以下的内容：修改Ext的外观，Ext资源文件的本地化，Ext资源文件的国际化。

第11章 JavaScript与HTML的调试

该章的目的就是要介绍此类工具的使用，包括在Firefox和Internet Explorer下的浏览器，并同时介绍如何在页面中查找HTML元素、观察HTTP消息、结构等的实用技巧。

第12章 新闻管理系统

这是一个C# + SQL Server Express + Ext的新闻管理系统，充分演示了Ext怎样作为一个UI框架结合到现实的开发平台中。

本书由张鑫、黄灯桥、杨彦强执笔。在编写的过程中，InfoQ中文站(infoq.com/cn)总编辑霍泰稳先生，jQuery中文社区站长杨乐先生，JSVM.org始创人万常华先生和“一起Ext”(17ext.com)站长对本书的编写提出了许多建设性的意见和肯定的反馈，给予作者极大的帮助。清华大学出版社的栾大成编辑统筹下的工作小组对本书的编排和润色工作付出了辛勤的劳动，在此一一向他们表示衷心的感谢。

本书在编写过程中，作者参考了extjs.com的部分教程及ajaxjs.com《Ext中文文档》等的资源。在此特向这些资源的作者表示感谢。信息总在万变之中，我们笔下对Ext的班门弄斧尚不足以窥见Ext之全貌，因此希望得到读者的批评指正，以利于和Ajax/Ext爱好者或者开发社区产生共鸣。

交流社区

本书从创作思路的产生到创作过程的交流，都是离不开大量网络高手的帮助的，对于学习Ext而言，也是如此。关于本书内容和学习中出现的问题，欢迎到Ext中文站以及作者的博客参与讨论：

Ext中文站：www.ajaxjs.com  邮件：support@ajaxjs.com

张鑫博客：blog.csdn.net/zhangxin09

灯桥博客：blog.csdn.net/tianxiaode

彦强博客：blog.csdn.net/Eric Yang

目    录

 

第1章  Ext开篇 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

第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章  数据驱动 303

6.1  数据的提交与响应 304

6.1.1  HTML页面交换 304

6.1.2  Ajax请求与响应 308

6.2  容器类MixedCollection 320

6.3  数据存储基本单元Record与

DataField 330

6.3.1  DataField 332

6.3.2  Record 332

6.4  数据存储Store 337

6.4.1  数据载入 338

6.4.2  数据的添加 346

6.4.3  取得记录信息 352

6.4.4  排序 356

6.4.5  事务模式 357

6.4.6  查找 359

6.5  数据代理DataProxy 360

6.5.1  Ext.data.DataProxy 360

6.5.2  Ext.data.MemoryProxy 360

6.5.3  Ext.data.HttpProxy 362

6.5.4  Ext.data.ScriptTagProxy 363

6.6  数据读取器DataReader 365

6.6.1  Ext.data.DataReader 365

6.6.2  Ext.data.ArrayReader 365

6.6.3  Ext.data.JsonReader 366

6.6.4  Ext.data.XmlReader 368

6.7  Ext.ux.DWR 369

6.7.1  Ext.data.DwrProxy 370

6.7.2  Ext.data.DwrReader 372

6.7.3  应用页面 374

6.7.4  Web服务端配置 380

6.7.5  服务层接口 381

6.8  LitJson 384

6.8.1  JSON与对象之间的转换 385

6.8.2  输出JSON格式文本 388

6.8.3  接收和处理提交的JSON格式

文本 391

第7章  Ext高级应用 395

7.1  JavaScript闭包详解 396

7.1.1  闭包的概念 396

7.1.2  闭包成员的生命周期 397

7.1.3  引用而不是复制 398

7.1.4  闭包应用场景 398

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

7.2.1  从脚本语言到动态语言 400

7.2.2  基于类的JavaScript继承 402

7.2.3  Ext组件的复用 407

7.2.4  使用super关键字 413

7.2.5  使用命名空间 416

7.3  单页面应用程序的设计 418

7.3.1  单页面GUI为我们带来了

什么？ 419

7.3.2  单页面GUI的应用情况 420

7.3.3  动态资源下载 420

第8章  扩展与插件 423

8.1  扩展与插件简介 424

8.2  扩展的写法 424

8.3  插件的写法 424

8.4  扩展与插件的选择 425

8.5  Ext编辑控件只读插件 425

8.6  TreeComboBox 432

8.7  微调扩展Spinner 437

8.8  Property Grid 442

8.9  集成文本编辑器TinyMCE Editor 447

8.10  Flash上传对话框 454

8.11  Ext GUI Builder 465

8.12  小结 467

第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  使用MyGeneration创建新闻

类别和新闻的数据层和

实体类 551

12.7.2  页面开发 554

12.8  修改密码页面 580

12.9  退出页面 581

12.10  设置权限 581