深入浅出Ext JS（第3版）

内容概要

徐会生

百度高级软件研发工程师，从事多年企业级项目研发，擅长权限与流程相关领域。他是国内探索Ext JS的先驱之一，精通UI开发，业余时间为社区撰写了大量开源方面的文章。

书籍目录

目 录



第1章 　Ext概述　　1

1.1 　何为Ext　　1

1.1.1 　Ext版本变迁　　2

1.1.2 　Ext到底是收费的还是免费的　　3

1.2 　下载Ext发布包　　3

1.3 　查看Ext自带的API和示例　　4

1.3.1 　绚丽的产品文档　　4

1.3.2 　丰富的组件库　　6

1.3.3 　更多高级组件　　6

1.4 　第一个示例Hello World　　7

1.4.1 　直接使用下载的发布包　　7

1.4.2 　在项目中使用Ext　　9

1.5 　调试工具Firebug　　9

1.6 　开发中的常见问题　　12

1.6.1 　有些示例必须放在服务器上才能看到效果　　12

1.6.2 　IE浏览器逗号问题　　13

1.6.3 　Ext的汉化　　13

1.7 　小结　　13

第2章 　Ext框架基础　　14

2.1 　面向对象的基础架构　　14

2.1.1 　创建新类　　14

2.1.2 　对象继承　　15

2.1.3 　多重继承　　15

2.1.4 　自动生成代码　　16

2.2 　统一的组件模型　　17

2.2.1 　Ext.Component　　17

2.2.2 　Ext.Panel　　18

2.2.3 　Ext.Container　　18

2.3 　完善的事件机制　　19

2.3.1 　自定义事件　　20

2.3.2 　浏览器事件　　21

2.3.3 　Ext.EventObjectImpl　　22

2.3.4 　Ext.util.Observable　　24

2.3.5 　Ext.EventManager　　26

2.4 　小结　　28

第3章 　表格控件　　29

3.1 　表格的特性简介　　29

3.2 　制作一个简单的表格　　30

3.3 　表格常用功能详解　　33

3.3.1 　部分属性功能　　33

3.3.2 　自主决定每列的宽度　　35

3.3.3 　让表格支持按列排序　　36

3.3.4 　解决中文排序　　38

3.3.5 　显示日期类型数据　　40

3.4 　表格渲染　　40

3.5 　给表格的行和列设置颜色　　44

3.6 　自动显示行号和复选框　　45

3.6.1 　自动显示行号　　45

3.6.2 　复选框　　47

3.7 　选择模型　　48

3.8 　表格视图——Ext.grid.GridView　　49

3.9 　表格分页　　50

3.9.1 　为表格添加分页工具条　　50

3.9.2 　通过后台脚本获得分页数据　　51

3.9.3 　分页工具条显示在表格的顶部　　55

3.9.4 　让Ext支持前台分页　　56

3.10 　后台排序　　57

3.11 　多重排序　　59

3.12 　可编辑表格控件——EditorGrid　　60

3.12.1 　制作一个简单的EditorGrid　　60

3.12.2 　添加一行数据　　61

3.12.3 　保存修改结果　　63

3.12.4 　限制输入数据的类型　　64

3.13 　属性表格控件——PropertyGrid　　68

3.13.1 　简介　　68

3.13.2 　只能看不能动的PropertyGrid　　69

3.14 　分组表格控件——GroupingGrid　　69

3.14.1 　分组表格简介　　69

3.14.2 　分组表格视图　　70

3.15 　可拖放的表格　　72

3.15.1 　通过拖放改变表格的大小　　72

3.15.2 　在同一个表格里拖放　　73

3.15.3 　表格之间的拖放　　74

3.16 　表格与右键菜单　　74

3.17 　基于表格的扩展插件　　75

3.17.1 　行编辑器　　75

3.17.2 　进度条分页组件　　76

3.17.3 　缓冲式表格视图　　77

3.17.4 　分组表头　　77

3.17.5 　锁定列　　79

3.17.6 　树形表格　　80

3.17.7 　表格过滤组件　　82

3.18 　小结　　84

第4章 　表单与输入控件　　85

4.1 　制作表单　　85

4.2 　FormPanel和BasicForm详解　　86

4.3 　Ext支持的输入组件　　86

4.3.1 　控件继承图　　87

4.3.2 　表单控件　　87

4.3.3 　基本输入控件Ext.form.Field　　90

4.3.4 　文本输入控件Ext.form.TextField　　92

4.3.5 　多行文本输入控件Ext.form.TextArea　　93

4.3.6 　日期输入控件Ext.form.DateField　　93

4.3.7 　时间输入控件Ext.form.TimeField　　94

4.3.8 　在线编辑器Ext.form.HtmlEditor　　95

4.3.9 　隐藏域Ext.form.Hidden　　95

4.3.10 　如何使用input type= "image"　　96

4.4 　ComboBox详解　　96

4.4.1 　ComboBox简介　　96

4.4.2 　将Select转换成ComboBox　　98

4.4.3 　ComboBox结构详解　　98

4.4.4 　ComboBox读取远程数据　　100

4.4.5 　ComboBox的高级配置　　101

4.4.6 　监听用户选择的数据　　103

4.4.7 　使用本地数据实现省、市、县级联　　105

4.4.8 　使用后台数据实现省、市、县级联　　108

4.4.9 　添加MultiSelect和ItemSelector扩展以及示例　　110

4.5 　复选框和单选按钮　　113

4.5.1 　复选框　　113

4.5.2 　单选按钮　　114

4.5.3 　CheckboxGroup和RadioGroup控件　　115

4.6 　滑动条表单控件　　119

4.7 　表单布局　　121

4.7.1 　默认的平铺布局　　121

4.7.2 　平行分列布局　　122

4.7.3 　在布局中使用fieldset　　125

4.7.4 　在fieldset中使用布局　　127

4.7.5 　自定义布局　　129

4.8 　数据校验　　131

4.8.1 　输入不能为空　　131

4.8.2 　最大长度和最小长度　　132

4.8.3 　借助vtype　　132

4.8.4 　自定义校验规则　　133

4.8.5 　算不上校验的NumberField　　134

4.8.6 　使用后台返回的校验信息　　135

4.9 　使用表单提交数据　　136

4.9.1 　Ext默认的提交形式　　136

4.9.2 　使用HTML原始的提交形式　　138

4.9.3 　单纯Ajax　　139

4.9.4 　文件上传　　139

4.9.5 　文件上传控件　　140

4.10 　自动把数据填充到表单中　　141

4.11 　小结　　143

第5章 　树形结构　　144

5.1 　TreePanel的基本使用　　144

5.1.1 　创建一棵树　　144

5.1.2 　为树添加枝和叶　　145

5.1.3 　树形的配置　　146

5.1.4 　使用TreeStore获得数据　　147

5.1.5 　使用JSP提供后台数据　　150

5.1.6 　通过XML加载树形　　153

5.2 　树的事件　　154

5.3 　右键菜单　　155

5.4 　修改节点的默认图标　　156

5.5 　从节点弹出对话框　　157

5.6 　节点提示信息　　158

5.7 　为节点设置超链接　　159

5.8 　树形的拖放　　160

5.8.1 　节点拖放的3种形式　　161

5.8.2 　叶子不能append　　162

5.8.3 　判断拖放的目标　　162

5.8.4 　树之间的拖放　　164

5.9 　对树进行排序　　165

5.10 　带Checkbox的树形　　166

5.11 　表格与树形的结合　　167

5.12 　更多树形的高级应用　　170

5.12.1 　如何选中树的某个节点　　170

5.12.2 　刷新树的所有节点　　170

5.12.3 　借用grid的缓冲视图插件　　170

5.12.4 　借用grid的锁定插件　　170

5.13 　小结　　171

第6章 　布局　　172

6.1 　布局的用途　　172

6.2 　最简单的布局——FitLayout　　175

6.3 　常用的边框布局——BorderLayout　　177

6.3.1 　设置子区域的大小　　178

6.3.2 　使用split并限制它的范围　　180

6.3.3 　子区域的展开和折叠　　182

6.4 　制作伸缩菜单的布局——Accordion　　186

6.5 　实现操作向导的布局——CardLayout　　187

6.6 　控制位置和大小的布局——AnchorLayout和AbsoluteLayout　　190

6.7 　表单专用的布局——FormLayout　　195

6.8 　分列布局——ColumnLayout　　197

6.9 　表格状布局——TableLayout　　199

6.10 　BoxLayout——HBox　　200

6.11 　BoxLayout——VBox　　201

6.12 　Ext.TabPanel　　203

6.12.1 　标签面板的滚动菜单　　206

6.12.2 　竖直分组的标签面板　　206

6.13 　与布局相关的其他知识　　207

6.13.1 　超类Ext.Container的公共配置与xtype的概念　　208

6.13.2　　layout的超类Ext.layout.ContainerLayout　　208

6.13.3 　不指定任何布局时会发生的情况　　209

6.13.4 　使用Viewport对整个页面进行布局　　210

6.13.5 　使用嵌套实现复杂布局　　211

6.14 　小结　　213

第7章 　弹出窗口　　214

7.1 　Ext.MessageBox　　214

7.1.1 　Ext.MessageBox.alert()　　214

7.1.2 　Ext.MessageBox.confirm()　　215

7.1.3 　Ext.MessageBox.prompt()　　216

7.2 　对话框的更多配置　　216

7.2.1 　可以输入多行的输入框　　216

7.2.2 　自定义对话框的按钮　　217

7.2.3 　进度条　　218

7.2.4 　动画效果　　219

7.3 　Ext.Window的常用属性　　220

7.3.1 　创建窗口　　220

7.3.2 　窗口的最大化和最小化　　221

7.3.3 　窗口的隐藏与销毁　　222

7.3.4 　防止窗口超出浏览器边界　　223

7.3.5 　设置窗口中的按钮　　224

7.3.6 　窗口的其他配置选项　　226

7.4 　窗口分组　　227

7.5 　向窗口中放入各种控件　　229

7.5.1 　在窗口中加入表格　　229

7.5.2 　在窗口中加入表单　　230

7.5.3 　复杂布局　　231

7.6 　小结　　233

第8章 　工具条和菜单　　234

8.1 　简单菜单　　234

8.2 　向菜单中添加分隔线　　236

8.3 　多级菜单　　237

8.4 　高级菜单　　239

8.4.1 　多选菜单和单选菜单　　239

8.4.2 　日期菜单　　241

8.4.3 　颜色菜单　　242

8.4.4 　在菜单中添加其他组件　　243

8.4.5 　使用Ext.menu.MenuMgr统一管理菜单　　244

8.5 　工具条组件详解　　246

8.5.1 　Ext.Toolbar.Button　　247

8.5.2 　Ext.Toolbar.TextMenu　　247

8.5.3 　Ext.Toolbar.Spacer　　248

8.5.4 　Ext.Toolbar.Separator　　248

8.5.5 　Ext.Toolbar.Fill　　249

8.5.6 　Ext.Toolbar. SplitButton　　249

8.5.7 　为工具条添加HTML标签　　251

8.5.8 　为工具条添加输入控件　　252

8.6 　分页工具条　　252

8.6.1 　Ext.PagingToolbar的基本用法　　252

8.6.2 　向Ext.PagingToolbar添加按钮组件　　254

8.7 　右键弹出菜单　　255

8.8 　处理工具条溢出　　256

8.9 　工具条中的分组按钮　　257

8.10 　更多工具条插件　　258

8.11 　状态栏　　259

8.12 　小结　　262

第9章 　数据存储与传输　　263

9.1 　Ext.data命名空间下的常用组件简介　　263

9.2 　Ext.data.Connection　　263

9.3 　Ext.data.Record　　265

9.4 　Ext.data.Store　　266

9.4.1 　基本应用　　266

9.4.2 　对数据进行排序　　267

9.4.3 　从store中获取数据　　268

9.4.4 　更新store中的数据　　269

9.4.5 　加载及显示数据　　271

9.4.6 　其他功能　　272

9.5 　常用Proxy　　273

9.5.1 　MemoryProxy　　273

9.5.2 　HttpProxy　　273

9.5.3 　ScriptTagProxy　　274

9.6 　常用Reader　　275

9.6.1 　ArrayReader　　275

9.6.2 　JsonReader　　275

9.6.3 　XmlReader　　277

9.7 　高级store　　278

9.8 　Ext中的Ajax　　280

9.8.1 　最容易看到的Ext.Ajax　　280

9.8.2 　使用Ajax获取和提交数据时出现乱码　　281

9.9 　关于scope和bind()　　281

9.10 　Ext Direct　　283

9.10.1 　简介　　283

9.10.2 　洞悉Ext Direct的原理　　285

9.10.3 　使用directjngine支持Ext Direct　　286

9.11 　小结　　289

第10章 　用户扩展与插件　　290

10.1 　介绍用户扩展　　290

10.2 　编写用户扩展所需的基础知识　　294

10.2.1 　继承模型　　294

10.2.2 　了解Component的生命

周期　　298

10.3 　编写自定义用户扩展　　299

10.4 　介绍Ext的插件体系　　300

10.5 　常用扩展组件一：UploadDialog　　303

10.6 　常用扩展组件二： Ext.ux.IFrame　　306

10.7 　小结　　309

第11章 　拖放　　310

11.1 　拖放简介　　310

11.2 　拖放的简单应用　　310

11.3 　拖放组件体系　　311

11.4 　拖放的事件　　313

11.5 　高级拖放　　316

11.5.1 　基础　　316

11.5.2 　控制柄　　317

11.5.3 　总在最上面　　318

11.5.4 　代理　　319

11.5.5 　分组　　320

11.5.6 　网格　　325

11.5.7 　拖放圆形　　326

11.5.8 　拖放范围　　327

11.6 　小结　　329

第12章 　实用工具　　330

12.1 　Ext提供的常用函数　　330

12.1.1 　onReady()函数　　330

12.1.2 　以get开头的函数　　331

12.1.3 　encode()函数和decode()函数　　334

12.1.4 　extend()函数　　336

12.1.5 　apply()函数和applyIf()函数　　337

12.1.6 　namespace()函数　　337

12.1.7 　Ext.each()函数　　338

12.2 　使用DomHelper和Template动态生成HTML　　339

12.2.1 　使用DomHelper生成小片段　　340

12.2.2 　Ext.DomHelper.apply Styles()函数　　343

12.2.3 　模板　　343

12.2.4 　Ext.DomHelper.create Template()函数　　346

12.2.5 　复杂模板XTemplate　　347

12.3 　图形报表　　349

12.3.1 　柱状图　　350

12.3.2 　横向柱状图　　351

12.3.3 　折线图　　352

12.3.4 　饼状图　　354

12.3.5 　柱状堆栈图　　355

12.3.6 　横向柱状堆栈图　　356

12.3.7 　混合图　　357

12.3.8 　drawing　　359

12.4 　悬停提示　　359

12.4.1 　初始化　　359

12.4.2 　注册提示　　360

12.4.3 　标签提示　　360

12.4.4 　全局配置　　361

12.4.5 　个体配置　　361

12.5 　用Ext.Utils.CSS切换主题　　362

12.6 　使用fx实现动画效果　　364

12.7 　小结　　366

第13章 　一个完整的Ext应用　　367

13.1 　确定整体布局　　368

13.2 　使用HTML和CSS设置静态信息　　369

13.3 　对学生信息进行数据建模　　370

13.4 　在页面中显示学生信息列表　　375

13.5 　添加表单编辑学生信息　　379

13.6 　为表单添加提交事件　　382

13.7 　清空表单信息　　385

13.8 　删除指定的学生信息　　386

13.9 　在表格和表单之间进行数据交互　　387

13.10 　提升加载速度　　388

13.10.1 　对JavaScript进行压缩混淆　　388

13.10.2 　使用客户端缓存　　389

13.10.3 　使用GZIP压缩　　390

13.11 　小结　　392

第14章 　应用MVC　　393

14.1 　为啥要用MVC　　393

14.2 　应用MVC实例　　394

14.3 　综合示例　　397

14.3.1 　整体布局　　398

14.3.2 　左侧功能菜单　　399

14.3.3 　左侧菜单与中央内容联动　　401

14.3.4 　显示单个功能模块　　402

14.4 　功能详解　　405

14.4.1 　用户模块　　405

14.4.2 　组织机构模块　　408

14.4.3 　特殊功能　　411

14.5 　小结　　413

作者简介

在以用户为中心的时代，应用的界面外观变得越来越重要。然而，很多程序员都缺乏美术功底，要开发出界面美观的应用实属不易，而Ext JS为广大程序员解决了这一难题。它有丰富多彩的界面和强大的功能，是开发具有炫丽外观的RIA应用的最佳选择。

本书是《深入浅出Ext JS》的第3版，不仅对上一版的内容进行了增补，还详细讨论了 Ext JS 4.2的新特性，比如无需Flash支持的绘图功能、基于此实现的各种图表功能、动态刷新的表格滚动视图插件、迟来的表格锁定插件、最新提供的MVC架构和自动加载脚本功能等。此外，我们还在最后一章增加了一个实际的复杂实例，演示了MVC是如何影响我们的开发过程的。

本书注重理论与实践相结合，适合各层次的Web开发人员阅读。

 深入浅出Ext JS（第3版）下载