extjs实用开发指南（Extjs的优点）

本文目录

• Extjs的优点
• web前端需要哪些技术
• Extjs4模仿desktop的桌面问题
• ExtJS Web应用程序开发指南的目录

Extjs的优点

UI全部帮你搞定，不用费劲去弄样式！ 浏览器兼容性好，在各各浏览器下测试都OK！ 和后台代码无关，不管你后面用C#也好 JAVA也好 还是PHP 都和它没关系。 动画效果，EXTJS的动画效果做得很不错，提高了用户的感知度。

缺点： 开发周期延长（要先学习才能灵活使用） 速度稍慢（对于丰富互联网应用是肯定有这个缺点的，不过可以忽略，现在带宽在一点点升级，网速也不是问题了）

web前端需要哪些技术

1. 所有知识框架，那肯定是一个结构型的展现，就是一棵树。web前端的知识点非常多，也非常散，需要好几层结构来组织这个体系，否则就会显得很乱。那么如何组织、把谁和谁放在一块儿？这是真正值得我们去思考的，你也可以自己来思考一下这个问题。

2. 在我总结的这个知识框架中，首先第一层我划分为：理论知识，类库框架，编码开发，运行环境。如下图：

接下来给大家解释一下：

这个图要从下往上看，为何？——因为下面是上面的基础；

• 首先，我们需要一定的理论知识，不管是你听别人讲授、自己看书还是网上淘资料，你都需要一定的理论知识，每一种程序开发，都避免不了。

• 第二，有了这些理论知识我们就可以编码了——不错——but，没有人能抵挡住第三方框架和类库的诱惑，例如jquery；

• 第三，有了这些理论知识和协助我们的类库框架，我们就可真正的编码了。大家可能以为编码开发不就是写代码吗，还有啥？——这里面道道多着呢；

• 最后，开发程序的目的，最终是为了能高效、稳定的运行在相应的环境中，这其中又有哪些事情需要我们去做？请期待；

• 理论知识 包括“软知识”和“硬知识”

“软知识”和“硬知识”大家可能觉得词陌生，其实我一说大家就能明白。

• 所谓“软”的就是能在各个程序开发中都用到的，算是基本功、内功，例如数据结构、算法、设计模式、面向对象等等；

• 所谓“硬”的就是能直接用于本程序开发的。用C语言你就得学C语言语法，此时学java没用。我们web前端开发所需要的硬知识其实都包含在三个标准里面：就像我现在一样，试着自己总结一下属于自己的东西，随时反省随时进步

Extjs4模仿desktop的桌面问题

一个华丽的模拟Windows桌面的系统界面一定能让他就像看到穿黑丝的背影一样，感到眼前一亮。虽然穿黑丝的背影正面可能是个大妈，信息系统的核心也绝不是华而不实的界面。不管怎么说提供一个能瞬间亮瞎客户狗眼的界面和交互模式绝对不是件坏事。
　　
　　说明：
　　有些地方没有仔细推敲,还有重构的空间,应该没有Bug,不过还是建议学习消化后再用。
　　我修改了下,代码里只有展现层。业务逻辑和数据访问层我先去掉了，这样比较符合本篇主题，也方便大家单独应用，以后会陆续添加
　　附送登录页，存在明文传送密码的问题，用在项目中要注意
　　附送传统菜单页面,主要是为了演示模块化加载功能页,缺少基本的退出,重新登录之类的功能,自己可以添加功能
　　如果打算全套上ExtJs4,建议看完本系列并熟悉ExtJs4后再酌情考虑。如果只是用这个“壳”，套Iframe用自己的页,那就没啥太大问题了。
　　如果没有使用ExtJs的经验，不建议用本篇的代码来学习，这是综合应用，代码比较复杂。
先给出 Xg.part1.rar 、 Xg.part2.rar源码下载链接：

ExtJS Web应用程序开发指南的目录

《extjs web应用程序开发指南(第2版)》
第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