书名：ExtJS Web应用程序开发指南(第2版)(针对Ext JS 4.0更新)
作者：卫军 夏慧军 孟腊春

ISBN：9787111353911

定价：69.00元
出版社：机械工业出版社华章公司

China-pub：http://product.china-pub.com/198429

图书内容：

      本书共18章和1个附录，是对第1版的全面升级，增补了大量ExtJS 4.0中的新特性。从基本的ExtJS功能开始讲解RIA Web开发，从而引出用户体验丰富的ExtJS技术。接着通过经典的“Hello World”来快速搭建和配置第一个程序。然后通过4章来详细讲解ExtJS的基本功能，包括：最常用的表单、面板和布局类，常用的工具类与函数，以及ExtJS对事件的响应。本书还结合现今流行的Web框架进行改造，将相关技术融合起来应用。Ajax已经逐渐渗透到Web开发的各个方面了，ExtJS能够与其完美结合。讲解完这些提高内容后，本书还深入介绍了增强型模板，重要的数据模型，以及ExtJS高级组件。考虑到ExtJS与主流服务端框架的整合越来越紧密，本书还特意讲解了Struts和Struts2框架的整合与配置。最后全面细致地讲解了ExtJS 4.0中新增的主题、图形和图表部分，真正实现完全整合应用ExtJS技术。
本书语言通俗易懂，版式清新，并通过大量的实例去讲解技术。对于广大的Web程序员，本书能帮你找到经典应用的解决方案。对RIA Web应用开发的爱好者，本书可以帮你找到进步的阶梯。本书可以作为Web开发的自学参考书，也可以作为RIA Web开发的培训教材。

      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来进行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新特性的指导手册。

致谢与分工

      本书由卫军、夏慧军和孟腊春编著。此外还要感谢王斌、张强林、万雷、张赛桥、刘军华、黄北军、陈洪军、黄中林、陈鲲、赵腾伦等人，他们为本书的出版做出了贡献。本书由成都道然科技有限责任公司策划和审定。最后感谢Testdll、清源、Alex XRDU等多位技术专家提出的宝贵意见和建议。
限于水平和精力有限，书中疏漏之处难免，欢迎读者批评指正。为方便读者更好地理解和阅读本书，我们将书中的代码与示例提供给读者，相关代码的下载地址为：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

      通过前一章的学习，从概念上对ExtJS有了初步了解。本章从开发包的安装开始讲解，通过“Hello World”来直观展示ExtJS的美妙之处。此外还介绍了相关的开发工具以及对原有JavaScript对象的扩展。本章开始正式进入ExtJS的开发学习。

本章内容提示：
      认识ExtJS的开发包
      也从Hello world开始
      ExtJS中的基本概念
      非常有用的开发工具
      ExtJS对原有JavaScript对象的扩展

要开始ExtJS之旅的第一步是要获得开发包，可以从官方网站http://www.sencha.com/下载，以保证获得最新版本。其下载地址是http://www.sencha.com/ products/extjs/download/，下载成功后的开发包是ext-4.0.0-gpl.zip，有21.9MB之大。不过不用担心，这个包并不是ExtJS程序真正运行时必须要载入的，这个包中包括了很多有用的资源，在正式开始开发之前，有必要了解这个包中的相关资源，图2-1就是解开ext-4.0.0-gpl.zip之后的文件目录结构。
下面分别对其中主要的资源进行简单介绍。
builds目录是ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快。
docs中当然是ExtJS的文档了，其中最重要的是ExtJS的API，这是开发ExtJS程序过程中的法宝。
examples中是官方的演示示例，这里是初学者最好的学习乐园，通过对这些演示示例的熟悉，就能很快掌握ExtJS开发。
locale这是多国语言的资源文件，其中ext-lang-zh_CN.js是简体中文。
overview是ExtJS的功能简述，其中从整体上阐述了ExtJS的功能和结构。
pkgs中是ExtJS各部分功能的打包文件。
resource中是ExtJS要用到的图片文件与样式表文件，ExtJS引以为傲的漂亮外观就全部由这个目录中的文件所控制。
src目录是未压缩的源代码目录。
bootstrap.js是ExtJS库的引导文件，通过参数可以自动切换ext-all.js和ext-all-debug.js。
ext-all.js文件是ExtJS的核心库，是必须要引入的。
ext-all-debug.js文件是ext-all.js的调试版，在调试时需要使用到调试版。

      对于ExtJS的学习，可以从“Hello World”开始，熟悉其开发与运行过程。ExtJS只是一套用JavaScript实现的界面层组件，所以在没有与服务器要进行数据交换的情况之下，在本地浏览器中就能运行得很好。第一个ExtJS程序“Hello World”不需要同服务器端进行通信，只要使用简单的HTML文件即可。如代码2-1所示。
代码2-1：ExtJS的Hello world
<HTML>
<HEAD>
  <TITLE>HelloWorld</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
Ext.onReady(function(){
    Ext.MessageBox.alert('HelloWorld', 'Hello World!Hello World!Hello World!Hello World!');
});
  </script>
</HEAD>
<BODY></BODY>
</HTML>
代码2-1对于写过JavaScript程序的人来说并不难懂。除了HTML的框架之外，引入了1个CSS文件，2个js文件，这3个文件是做ExtJS开发必须引入的。将这段代码保存为ExtJS-HelloWorld.html文件，为了正常地引入必须的资源，我们需要特别注意这个文件要存放的路径，它应该放到ExtJS开发包的同一级，如图2-2所示。
如图2-2所示，这就是文件放置的路径，其中ExtJS 4.0目录就是图2-1所示的内容。好了，程序已经写完，可以看看运行效果了。只要双击ExtJS-HelloWorld.html文件，就会自动打开浏览器，但是由于这是JavaScript程序，所以会被浏览器阻止，如图2-3所示。

     此时，只须选择“允许阻止的内容”，程序就会正常运行，并出现如图2-4所示的界面，这表明ExtJS程序已经完全正常运行了！虽然简单，但是惊喜才刚刚开始，简单的对话框就已经如此的漂亮了。

      第1章提到过，ExtJS和传统的Web开发大不相同。特别是在界面开发上，不用再纠缠在HTML和CSS中，而与JavaSwing或者Delphi的开发方式非常相同。这样在ExtJS的开发中会有一些在传统Web开发中没有的概念，比如面板（Panel）、布局（Layout）、组件（Component）等。本节对这些概念加以说明，为后续的学习打好概念上的基础。
     面板Panel：面板是一块区域，程序员可以在之上放置各种组件，从而形成用户界面。说得形象一点，面板就是空白的画板，程序员是画家，最终画板上会出现什么，决定于画家。当然作为面板来说，最终展现在上面的不是水墨国画，而是各种ExtJS的组件。面板的出现解决了窗口（对于Web应用来说就是一个浏览器窗口）不方便直接分拆的问题。利用面板就能将窗口分割成多个部分，这样对窗口来说，它只需要管理好面板在窗口上的展现就可以了，不用再关心面板上各种组件的展现了，因为这部分工作由面板自己来管理。很显然，面板的引入将复杂的问题进行了隔离，从而对软件开发的界面产生了深远的影响，特别是对软件界面能够跟随屏幕大小自适应调整提供了非常好的解决方案。
     布局Layout：布局是指组件在一个容器中的摆放方式。在讲到布局时肯定有一个容器，这是用来摆放的空间；同时也有需要摆放的组件，它是用来操作的实体。当容器指定了特定布局时，往容器中放置的组件，就会按规定的布局自动调整，这个过程不需要程序员的参与，从而能得到更加规范的用户界面。ExtJS的布局与JavaSwing的布局基本一致，为实现丰富的用户界面提供了保证。
     组件Component：组件是指已经预先实现好特定功能，并能够重用到编程中的代码段以及相关资源。在ExtJS中，组件可以简单到一个按钮，也可以复杂到数据表格。组件将强大的功能带给普通的软件开发者，大大加快了软件的开发速度，同时也能保证更高的质量。除了官方提供的精美好用的组件外，还有许多功能各异的第三方组件，并且还可以开发自己的特有组件。可以说ExtJS的编程就是组件编程，各种组件巧妙堆积在一起就成为了最终优美的界面，以及功能强大的应用软件。
?渲染Render：渲染是指含有ExtJS程序的页面下载完毕后在浏览器中完全展现出来的一个过程。作为普通的HTML页面也有渲染的过程，即从HTML与CSS代码开始装载进浏览器到整个页面根据HTML与CSS规则完全显示出来的过程。但是在ExtJS中有完全不同于HTML与CSS渲染过程的地方，虽然ExtJS的界面最终也是以HTML与CSS来展现，但是这些HTML与CSS不是从服务器下载而来，而完全是由ExtJS的引擎动态生成而来。所以ExtJS的渲染实际上是一个动态生成的过程，而非静态载入的过程。理解这点在学习ExtJS编程的过程中将会有重大的指导意义。
      窗口Window：ExtJS中的窗口并不是一个真正的Windows窗口，在本质上只是一个层利用CSS进行格式化，在外观和行为上都比较像真正的Windows窗口的显示区域。说到显示区域就应该想到面板，实际上在ExtJS的继承层次上，窗口组件就继承于面板组件。明白了ExtJS中窗口的本质就是一个层的话，那么就一定要知道它与真正Windows窗口的不同之处，比如要将ExtJS窗口拖到浏览器窗口之外等想法显然就是不能实现的。了解这个关键点，对于做ExtJS中的窗口编程会很有帮助。
     对话框Dialog：对话框也是在程序开发中经常用到的功能。一般有普通对话框、选择对话框、输入对话框以及一些特别的自定义对话框。在ExtJS中也提供了非常漂亮并且能够自定义的对话框，像ExtJS中的窗口一样，这些对话框的本质也是利用CSS进行格式化的结果。所以在使用这些对话框时，要注意这些对话框与真正Windows中对话框的异同，并灵活运用。

       “工欲善其事，必先利其器”，有好的工具往往能够事半功倍。对于软件开发来说，尤其如此。特别是像JavaScript这种解释型执行的脚本语言，开发与调试过程都非常困难，必须要有强有力的工具加以支持。而开发过程中的工具以代码编辑与调试工具最为重要，两者的结合就是集成开发环境（IDE）了，目前ExtJS已经有了一款专用的IDE产品ExtDesigner，它已成为ExtJS开发的有力工具，除此之外还有一些非常优秀的辅助工具可以推荐，它们确实可以帮助我们更快、更好地开发以ExtJS为基础的软件。

      spket支持JavaScript、XUL/XBL、Laszlo、SVG等新产品，具有代码自动完成、语法高亮、内容概要等功能特点，可以帮助开发人员高效地创建JavaScript程序，它可以以一个独立的桌面应用程序运行或者以Eclipse的插件运行，从它的官方网站http://www.spket.com/可以下载，这里主要介绍它作为Eclipse插件的安装及使用方式。
第1步：下载最新的插件程序，当前最新的版本为spket-1.6.18.zip，解压后插件的目录结构如图2-5所示，将plugins目录和features目录分别复制到Eclipse的安装目录下，Eclipse3.2及以上版本都可以使用该插件，执行操作后已经完成该插件的安装，启动Eclipse，现在可以开始对spket进行必要的配置。
第2步：启动Eclipse后进入Window -> Preferences选项，在这里可以找到Spket菜单，其中包含了该插件的相关配置，选中JavaScript Profiles项，会出现JavaScript配置列表，这里默认没有提供对ExtJS的支持，下一步我们会向列表中添加ExtJS库，如图2-6所示。
第3步：点击右侧的New按钮，在弹出的对话框中输入ExtJS的库名称，点击OK按钮，如图2-7所示。
第4步：在列表中选中刚新建的配置名，然后点击右侧的Add Library按钮，如图2-8所示。
第5步：在出现的库列表中选择ExtJS选项，选择后点击OK按钮，如图2-9所示。
第6步：选择列表中的ExtJS项，点击右侧的Add File 按钮，如图2-10所示。


 

 

 

 

 

 
第7步：在弹出的文件选择框中选择ExtJS库文件根目录下的ext-4.0.0.jsb2文件，然后点击打开按钮，如图2-11所示。
第8步：添加ext-4.0.0.jsb2文件后在JavaScript配置列表中会自动选中Ext All配置选项，然后选择ExtJS 4.0项点击Default按钮，将ExtJS 4.0设置为默认的JavaScript配置，最后点击OK按钮完成配置，如图2-12所示。
注意：官方的ext-4.0.0-gpl.zip版本中并没有内置ext-4.0.0.jsb2文件，这里的ext-4.0.0.jsb2文件由第三方提供，该文件必须放置在解压后的ext-4.0.0-gpl.zip文件的根目录下才能正常工作。
图2-12   JavaScript配置列表
第9步：到此spket插件的安装及配置就介绍完了，在spket编辑器中打开js文件就可以实现对ExtJS的代码提示，如图2-13所示。


 

 

 

      FullSource是一款小巧但实用的工具，相对于IE浏览器本身提供的“View source”功能，最大不同在于FullSource能够看到页面通过JavaScript动态生成的内容。ExtJS的组件完全靠JavaScript动态生成，因此在做调试工作时，FullSource非常有用。在本质上要看到所有的动态生成的代码并不难，只要将当前的DOM结构树从内层中拿出来就可以了，FullSource就是这么做的，不知道IE的这个“View source”为什么要设计的这么简单呢？
第1步：下载后的FullSource是个zip包，解开后就2个文件，在inf文件上点右键，选择安装，如图2-14所示。

 第2步：安装成功后关掉所有浏览器，然后重新打开一个新的浏览器，打开前面的“HelloWorld”的例子。在浏览器上面点右键，读者会发现多了一个FullSource菜单，如图2-15所示。

     第3步：此时，用“查看源文件”功能查看到的是真正的源文件，即代码2-1。、

     注意：用“Full Source”功能查看到的文件内容比代码2-1所示的代码多得多，这是显示图2-15所示页面真正需要的代码，这些代码是由ExtJS引擎动态生成的。能够看到真实的源代码对程序的调试将会起到重大的作用。

      Microsoft Script Debugger是Microsoft公司推出的一个脚本调试工具，它能调试基于VBScript与JavaScript客户端脚本，同时也能调试位于Microsoft IIS上的服务器端脚本。Microsoft Script Debugger只在IE浏览器下运行，并不支持其他浏览器。当然，这里只讨论用它来调试JavaScript客户端脚本的问题。
安装这个扩展非常简单，到Microsoft网站下载该扩展的安装包，然后运行安装过程就行了。安装好后，要作一些简单的配置才能在IE浏览器中使用它来调试脚本。
第1步：确认IE浏览器是否启用了调试功能。在IE浏览器中选择【工具】->【Internet选项】菜单，然后进入高级选项页，在其设置区域中检查【禁止脚本调试】选项是否已经取消选择，如果没有，应取消之，如图2-16所示。
第2步：将【禁止脚本调试】选项取消后，再重启IE浏览器，在其【查看】菜单中就会多出一个【脚本调试程序】的菜单，其有两个子菜单，【打开】与【在下一条语句中断】，如图2-17所示。
      可以先用IE浏览器打开包含有需要调试的JavaScript的Web页面，然后再利用脚本调试程序菜单中的【打开】命令即可打开Microsoft Script Debugger，并且会显示当前Web页面的代码，而光标也会停在暂停的行上。到了这一步，其调试方式与其他各种开发工具的调式方式就大同小异了，比如设置断点，单步执行，观察变量等，在此不做详细说明。

      为了实现更强大的功能也为了更好地与ExtJS整个框架一起工作，ExtJS对JavaScript中的Array、Date、Function、Number和String 5个类进行了扩展，提供了与之对应的工具类，这是对JavaScript原生对象功能的完善和加强。

Ext.Array提供了处理数组的常用方法集合，详情见表2-1。

Ext.Date提供了处理日期的常用方法集合，详情见表2-2。

Ext.Function提供了处理函数的常用方法集合，详情见表2-3。

Ext.Number提供了处理数字的常用方法集合，详情见表2-4。

Ext.String提供了处理字符串的常用方法集合，详情见表2-5。

Ext.Object提供了处理对象的常用方法集合，详情见表2-6。

      本章从认识ExtJS的开发入手，然后实现了经典的“Hello World”程序；之后对开发中几个经常要用到的概念进行了说明。说到正式的开发，就必然要提到开发工具，所以对开发调试工具也做了介绍。本章的最后说明了ExtJS对JavaScript五个原生对象的扩展。