概要

内容简介

前 言

目 录

概要

书名：精通JS脚本之ExtJS框架作者：赵俊昌、祝红涛、吴越人

出版时间：2011年03月

书号：978-7-122-10294-2

开书：16

装贴：平

版次：1版1次

页数：477也页

内容简介

本书由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持以及如何调试等。最后利用一个商品信息管理系统和一个企业任务管理系统，向读者演示了ExtJS在实际项目中的应用以及实现流程。

本书附有配套光盘，提供了书中实例的源代码和视频教学文件。

本书可以作为Web开发的自学参考书，也可以作为RIA Web程序开发的培训教材。

前 言

ExtJS的前身来自于YUI（Yahoo User Interface），经过不断发展与改进，现在已经成为最完整与成熟的一套构建RIA Web应用的JavaScript基础库。利用ExtJS构建的RIA Web应用具有与桌面程序一样的标准用户界面与操作方式，并且能够横跨不同的浏览器平台。ExtJS已经成为开发具有完美用户体验的Web应用的新选择。在RIA Web开发的征途中选择ExtJS作为克敌制胜的武器，也可以享受ExtJS带来的类似于Win32编程的原生态快乐。

现在，随着用户对体验的要求越来越高，特别对于Web应用开发者而言，ExtJS无疑是优秀的解决方案，能够帮助开发者快速实现良好用户界面的开发。ExtJS是在YUI基础上拓展出来的，国内用户数量众多。ExtJS是开源的，其生命力非常强劲。

本书内容

本书从ExtJS实现的基本功能开始讲解RIA Web开发，详细讲解了ExtJS的基本功能、常用的表单、面板和布局、常见的工具类与函数，以及ExtJS对事件的响应。本书结合现今流行的Web框架，融合相关技术应用。考虑到ExtJS与主流服务端框架的整合越来越紧密，本书还特意讲解了Struts框架的整合与配置。

本书语言通俗易懂、版式清新，通过大量的实例讲解技术。广大的Web程序员可以从本书中找到经典应用的解决方案，RIA Web应用程序开发的爱好者从中也可以找到前进的阶梯。本书可以作为Web开发的自学参考书，也可以作为RIA Web程序开发的培训教材。

第1章介绍了在使用JavaScript时必须掌握的基础知识，包括JavaScript语言的一些特性、如何编写JavaScript程序、JavaScript中的数据类型、常量、运算符以及各种流程控制语句等。

第2章介绍了浏览器对象模型与基本事件的处理。

第3章介绍了使用ExtJS的准备工作及调试。对调试工具FireBug、开发利器Spket进行了详细的讲解。

第4章介绍了ExtJS的事件机制，包括设计模式中的观察者模式、自定义事件、浏览器事件、ExtJS中的事件、各种事件登记方式、高级组件事件及ExtJS键盘事件。

第5章介绍了ExtJS组件，包括核心组件、信息提示框组件、进度条组件及实现工具栏和菜单栏组件。

第6章介绍了ExtJS页面元素与模板。

第7章介绍了ExtJS中的表单控件及布局，重点介绍了表单元素文本输入控件、多行文本输入控件、单选框、复选框、下拉列表框、日期输入控件及在线编辑器控件。

第8章介绍了ExtJS中的表格类布局，其中重点讲解了表格属性功能的应用，自主调整每列的宽度，使表格支持案例排序，解决中文排序、格式化显示日期类型数据等问题，以及巧妙的渲染表格，给表格的行和列设置颜色。

第9章在第8章的基础上对表格进行了扩展，讲解了表格的扩展功能，表格视图Ext.grid.GridView及表格分页的实现，同时还讲解了编辑表格控件EditorGrid、属性表格控件PropertyGrid、分组表格控件Group。

第10章介绍了一棵光秃秃的树如何成长为一棵枝繁叶茂的树？树控件的事件处理是怎样的？它的右键菜单生成及右键菜单的功能如何使用？如何把TreePanel控件的默认图标改为自己的图标？树节点之间的拖放是怎么实现的？

第11章主要介绍了ExtJS中的其他类布局。

第12章介绍了Ext.Ajax的request和update方法，如何使用Ajax优化项目。

第13章介绍了设计数据驱动模式的概念及使用。

第14章介绍了ExtJS的扩展，其中有ExtJS如何实现集成、ExtJS扩展的相关知识、实现增删改查功能和实现ExtJS扩展。

第15章介绍了调试JavaScript和HTML的工具的使用（针对Firefox和Internet Explorer浏览器），并同时介绍了如何在页面中查找HTML元素、观察HTTP消息和解耦股等的使用技巧。

第16章整合了ExtJS、Struts和Hibernate三大框架完成了商品信息管理系统，同时也讲解了ExtJS请求后台功能，完成了对商品的增、删、改、查操作。

第17章整合了SSH和ExtJS四大框架完成了企业任务管理系统，主要对企业个人任务处理、资料编辑、主管部门计划处理、部门人员管理、系统管理员的权限分配等重要需求功能进行了实现。

本书特色

以实际开发经验为基础

本书是在编者使用ExtJS开发项目的经验基础上编写的，以实际项目为根本，全面、翔实地介绍了ExtJS开发所需要具备的各种知识和技能，突出了实用性。

示例丰富，实用性强

本书采用理论为主、案例辅助的方式进行讲解，以掌握基础知识为目的，以提高实际开发能力为主旨，融“教”、“学”、“练”于一体。

视频支持

本书提供一套完整的视频讲座，其总长度大约有13个小时，方便读者学习。

读者对象

本书适合初次接触ExtJS的网页设计人员阅读，目标读者是Web应用前端设计者与开发者，尤其适合那些已经掌握了HTML、CSS和JavaScript等基础知识，希望全面学习ExtJS库的读者。本书也可作为大、中院校相关专业和社会培训班的教材。

本书主要由赵俊昌、祝红涛、吴越人编写，其他参与编写、资料整理、程序开发工作的人员还有张浩华、段韶治、马向林、李剑龙、李振、郝春雨、王咏梅、崔群法、郑千忠、孙宇霞等

目 录

1.1 JavaScript语言概述 2

1.1.1 JavaScript简介 2

1.1.2 JavaScript特点 3

1.1.3 JavaScript与Java 3

1.2 第一个JavaScript程序 5

1.2.1 嵌入JavaScript 5

1.2.2 链接外部JavaScript文件 6

1.2.3 注意事项 6

1.3 基础语法 8

1.3.1 数据类型 8

1.3.2 变量与常量 9

1.3.3 运算符 11

1.4 流程控制语句 13

1.4.1 if条件语句 13

1.4.2 switch条件语句 17

1.4.3 while循环语句 21

1.4.4 do while循环语句 21

1.4.5 for循环语句 22

1.4.6 for in循环语句 23

1.4.7 try catch finally语句 24

1.4.8 其他语句 26

第2章 JavaScript浏览器对象模型与事件处理 28

2.1 浏览器对象模型 29

2.1.1 文档对象 29

2.1.2 表单及其元素对象 32

2.1.3 浏览器信息对象 35

2.1.4 窗口对象 36

2.1.5 网址对象 38

2.1.6 历史记录对象 40

2.2 基本事件处理 41

2.3 2级DOM事件模型 42

2.3.1 事件传播 42

2.3.2 注册事件处理程序 43

2.3.3 event对象 44

2.4 常用事件 46

2.4.1 键盘事件 46

2.4.2 鼠标事件 47

2.4.3 页面事件 48

第3章 开始使用ExtJS 50

3.1 ExtJS概述 51

3.1.1 ExtJS简介 51

3.1.2 ExtJS中的基本概念 51

3.1.3 ExtJS与常见JavaScript库的介绍与对比 52

3.2 创建第一个程序 54

3.2.1 下载ExtJS 54

3.2.2 部署到开发工具中 55

3.2.3 编写HelloWorld.html 55

3.2.4 运行调试ExtJS 56

3.3 辅助开发 56

3.3.1 调试工具Firebug 56

3.3.2 开发利器Spket 61

第4章 ExtJS事件机制 68

4.1 设计模式——观察者模式 69

4.2 自定义事件 69

4.3 浏览器事件 71

4.4 ExtJS中的事件 73

4.4.1 Function.call()/apply()方法 73

4.4.2 函数的作用域 75

4.4.3 Ext.lib.Event事件 75

4.4.4 Ext.util.Observable事件 76

4.4.5 Ext.EventManager事件 79

4.4.6 Ext.EventObject事件 82

4.5 各种事件登记方式 85

4.5.1 传统式登记 85

4.5.2 内联式登记 85

4.5.3 Dom Level2登记 86

4.6 高级组件事件 86

4.7 ExtJS键盘事件 88

第5章 ExtJS组件 90

5.1 核心组件 91

5.1.1 ExtJS组件结构 91

5.1.2 Ext.Component 93

5.1.3 Ext.BoxComponent 94

5.1.4 Ext.Container 96

5.1.5 Ext.Panel 97

5.1.6 Ext.TabPanel 100

5.2 信息提示框组件 102

5.2.1 Ext.MessageBox简介 102

5.2.2 Ext.MessageBox.alert() 102

5.2.3 Ext.MessageBox.confirm() 103

5.2.4 Ext.MessageBox.prompt() 103

5.2.5 Ext.MessageBox.wait() 105

5.2.6 Ext.MessageBox.show() 105

5.2.7 Ext.MessageBox的其他功能 106

5.3 进度条组件 107

5.3.1 Ext.ProgressBar简介 107

5.3.2 手工模式的进度条 108

5.3.3 自动模式的进度条 109

5.3.4 自定义样式的进度条 111

5.4 工具栏和菜单栏 112

5.4.1 Ext.Toolbar简介 112

5.4.2 只包含按钮的简单工具栏 113

5.4.3 包含多种元素的复杂工具栏 115

5.4.4 Ext.menu.Menu简介 116

5.4.5 最简单的菜单栏 116

5.4.6 创建三级或多级菜单 117

5.4.7 具有选择框的菜单 119

第6章 页面元素与模板 121

6.1 构成用户界面的元素 122

6.2 获取页面元素 122

6.3 元素常见的使用方法 123

6.3.1 常见的“显示/隐藏”方法 124

6.3.2 常见的“内容控制”方法 125

6.3.3 常见的“操控DOM”方法 126

6.3.4 常见的“尺寸大小/定位”方法 128

6.3.5 常见的“特效动画”方法 129

6.3.6 DomHelper简介 130

6.4 DomQuery入门 131

6.4.1 元素选择符Selector 131

6.4.2 属性选择符Attributes Selectors 132

6.4.3 CSS值元素选择符 132

6.4.4 Ext.query与Ext.select 133

6.5 应用模板 133

6.5.1 Ext.Template 133

6.5.2 Ext.XTemplate 135

第7章 设计表单类布局 137

7.1 Form表单简介 138

7.1.1 Form表单的基本配置 138

7.1.2 ExtJS对Form表单的封装 141

7.2 ExtJS的表单组件 145

7.2.1 文本输入控件Ext.form.TextField 145

7.2.2 多行文本输入控件Ext.form.TextArea 148

7.2.3 单选框 150

7.2.4 复选框 152

7.2.5 下拉列表框 155

7.2.6 日期输入控件Ext.form.DateField 158

7.2.7 在线编辑器Ext.form.HtmlEditor 159

7.3 ExtJS表单组件的综合应用 161

第8章 设计表格类布局 167

8.1 表格简介 168

8.1.1 表格的基本属性 168

8.1.2 制作第一个表格 170

8.2 表格常用功能详解 174

8.2.1 主要属性功能 174

8.2.2 自定义列宽度 177

8.2.3 执行按列排序 180

8.2.4 解决中文排序 180

8.2.5 格式化显示日期类型数据 184

8.3 美化表格 185

8.4 设置表格背景颜色 188

8.5 显示行号和复选框 190

8.5.1 显示行号 190

8.5.2 引用复选框 193

第9章 表格的高级功能 194

9.1 表格视图——Ext.grid.GridView 195

9.2 表格分页 198

9.2.1 添加表格分页显示工具条 198

9.2.2 从后台脚本获得分页数据 199

9.2.3 在表格顶部显示分页工具条 202

9.2.4 实现前台分页效果 203

9.3 可编辑表格控件——EditorGrid 204

9.3.1 制作第一个EditorGrid 205

9.3.2 添加一行数据 207

9.3.3 保存修改结果 212

9.3.4 验证EditGrid中的数据 214

9.3.5 限制输入数据的类型 219

9.4 PropertyGrid属性表格控件 223

9.4.1 PropertyGrid简介 223

9.4.2 只读的PropertyGrid 224

9.4.3 对name列强制排序并获得value 224

9.4.4 自定义编辑器 226

9.5 分组表格控件——Group 227

9.5.1 分组表格简介 227

9.5.2 Ext.grid.GroupingView的配置操作 229

9.6 可拖放的表格 231

9.6.1 拖放改变表格的大小 231

9.6.2 在同一个表格里拖放 233

9.6.3 表格之间的拖放 235

9.6.4 表格与树之间的拖放 238

第10章 设计树状结构布局 241

10.1 TreePanel的基本使用 242

10.1.1 创建一棵树 242

10.1.2 为树生枝展叶 243

10.1.3 树形的配置 245

10.1.4 使用TreeLoader获得数据 248

10.1.5 读取本地JSON数据 251

10.2 树的事件 253

10.3 右键菜单 256

10.4 修改节点的默认图标 261

10.5 从节点弹出对话框 262

10.6 节点提示信息 264

10.7 为节点设置超链接 266

10.8 树形的拖放 267

10.8.1 节点拖放的3种形式 267

10.8.2 叶子不能append 268

10.8.3 判断拖放的目标 269

10.8.4 树之间的拖放 272

10.9 树形过滤器TreeFilter 275

10.10 利用TreeSorter对树进行排序 281

10.11 树形节点视图——Ext.tree.TreeNodeUI 282

10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 284

第11章 其他布局类简介 289

11.1 标准布局类 290

11.1.1 折叠布局——AccordionLayout 291

11.1.2 边框布局——BorderLayout 292

11.1.3 卡片式布局——CardLayout 294

11.1.4 列布局——ColoumnLayout 296

11.1.5 锚点布局——AnchorLayout 300

11.1.6 自适应布局——FitLayout 302

11.1.7 ContainerLayout 303

11.2 与布局有关的其他知识 304

11.2.1 父类Ext.Container公共配置与xtype的概念 305

11.2.2 使用Viewport 306

11.2.3 实现表单元素横排 307

第12章 ExtJS对Ajax的支持 310

12.1 Ext.Ajax介绍 311

12.1.1 Ext.Ajax.request方法详解 311

12.1.2 Ext.Ajax.request操作示例 312

12.1.3 Ext.Ajax.request提交XML数据 314

12.2 Ext.Updater基础 315

12.2.1 Ext.Updater.update方法 316

12.2.2 Ext.Updater.update操作示例 318

12.3 利用Ajax优化Web应用框架 321

12.3.1 多级联动菜单 321

12.3.2 Ajax修改用户密码 323

12.3.3 自动保存的网络记事本 325

12.3.4 网页计算器 326

第13章 设计数据驱动模式 330

13.1 XML/JSON数据格式比较 331

13.2 容器类MixedCollection 332

13.3 数据存储基本单元Record与dataField 333

13.3.1 dataField 335

13.3.2 Record 335

13.4 数据存储store 337

13.4.1 数据载入 337

13.4.2 对数据进行排序 340

13.4.3 从store 中获取数据 341

13.4.4 更新store 中的数据 342

13.4.5 加载及显示数据 344

13.5 数据代理 345

13.5.1 Ext.data.DataProxy 345

13.5.2 Ext.data.MemoryProxy 346

13.5.3 Ext.data.HttpProxy 347

13.5.4 Ext.data.ScriptTagProxy 347

13.6 数据读取器 349

13.6.1 Ext.data.DataReader 349

13.6.2 Ext.data.ArrayReader 349

13.6.3 Ext.data.JsonReader 349

13.6.4 Ext.data.XmlReader 350

13.7 Ext.ux.DWR 352

13.7.1 Ext.data.DwrProxy 352

13.7.2 Ext.data.DWRTreeLoader 354

13.7.4 Web服务端配置 355

13.7.5 服务层接口 356

第14章 ExtJS扩展 358

14.1 利用Ext.extend实现继承 359

14.2 与ExtJS扩展相关的预备知识 363

14.2.1 定义命名空间 364

14.2.2 使用xtype 365

14.3 用户扩展和插件 366

14.3.1 编写自定义用户扩展 367

14.3.2 常用插件UploadDialog 368

14.3.3 常用插件ManagedIFrame 369

14.4 使用ExtJS制作Flash统计报表 370

14.4.1 柱状图 370

14.4.2 折线图 372

14.4.3 饼状图 373

14.4.4 柱状栈图 374

第15章 调试JavaScript与HTML 376

15.1 Firebug的基本使用 377

15.1.1 开启或关闭Firebug 377

15.1.2 控制台 378

15.2 Firebug的应用 379

15.2.1 源代码调试 380

15.2.2 CSS调试 386

15.2.3 脚本调试 389

15.3 跟踪网络传输状态 393

15.4 在脚本文件中加入调试命令 395

15.5 在IE中使用Firebug 396

15.5.1 前端调试利器DebugBar 397

15.5.2 IE下的优秀JavaScript调试工具Companion.JS 400

15.5.3 DebugBar和Companion.JS的基本操作 401

15.6 调试技巧 403

15.6.1 在Firebug中直接调试脚本 403

15.6.2 调试代码运行速度 405

15.6.3 查看对象属性 407

第16章 ExtJS案例：商品信息管理系统 412

16.1 商品信息管理系统功能介绍 413

16.2 数据库设计和实现 413

16.2.1 数据库概念结构设计 413

16.2.2 数据库表设计 414

16.3 为项目做好准备 415

16.4 登录界面 417

16.5 栏目加载 421

16.6 为项目换肤 426

16.7 商品信息管理 428

16.7.1 商品信息的查询 428

16.7.2 商品信息的添加 436

16.7.3 商品信息的删除 441

16.7.4 商品信息的更新 443

第17章 ExtJS案例：企业任务管理系统 446

17.1 系统概述 447

17.2 需求分析 447

17.3 数据库设计 449

17.4 员工任务管理 452

17.4.1 个人任务处理 453

17.4.2 个人资料编辑 458

17.5 主管任务管理 462

17.5.1 部门计划处理 462

17.5.2 部门人员管理 469

17.6 系统管理员权限分配 474