《深入浅出Ext JS》样章

目 录 第1 章 EXT 概述.........................................................1 1.1 下载EXT发布包........................................... 1 1.2 如何查看EXT自带的API和示例................. 1 1.3 为什么有些示例必须放在服务器上 才能看到效果.............................................. 2 1.4 Hello World .................................................. 2 1.4.1 直接使用下载的发布包.................. 2 1.4.2 在项目中使用EXT........................... 3 1.5 为什么页面提示“找不到图片”............... 3 1.6 辅助开发...................................................... 4 1.6.1 调试工具Firebug.............................. 4 1.6.2 开发利器Spket ................................. 7 1.7 本章小结.................................................... 10 第2 章 EXT 框架基础..............................................11 2.1 EXT的事件和类......................................... 11 2.1.1 自定义事件.................................... 11 2.1.2 浏览器事件.................................... 13 2.1.3 Ext.lib.Event .......................... 13 2.1.4 Ext.util.Observable ......................... 14 2.1.5 Ext.EventManager ................... 17 2.1.6 Ext.EventObject...................... 19 2.2 EXT的核心组件......................................... 20 2.2.1 Ext.Component .......................... 20 2.2.2 Ext.BoxComponent ................... 22 2.2.3 Ext.Container .......................... 23 2.2.4 Ext.Panel ................................... 24 2.2.5 Ext.TabPanel............................. 24 2.3 本章小结.................................................... 27 第3 章 表格控件........................................................28 3.1 Grid的特性简介......................................... 28 3.2 制作一个简单的Grid ................................. 29 3.3 Grid常用功能详解..................................... 32 3.3.1 部分属性功能................................ 32 3.3.2 自主决定每列的宽度.................... 33 3.3.3 让Grid支持按列排序..................... 35 3.3.4 解决中文排序................................ 35 3.3.5 显示日期类型数据........................ 37 3.4 在单元格里显示红色的字、图片和按钮.....38 3.5 给Grid的行和列设置颜色......................... 41 3.6 自动显示行号和复选框............................. 42 3.6.1 自动显示行号................................ 43 3.6.2 复选框............................................ 44 3.7 选择模型.................................................... 45 3.8 表格视图——Ext.grid.GridView...... 46 3.9 表格分页.................................................... 47 3.9.1 为Grid添加分页工具条................. 48 3.9.2 通过后台脚本获得分页数据......... 49 3.9.3 分页工具栏显示在Grid的顶部..... 51 3.9.4 让EXT支持前台排序..................... 52 3.10 后台排序.................................................. 53 3.11 可编辑表格控件——EditorGrid ............. 55 3.11.1 制作一个简单的EditorGrid ......... 55 3.11.2 添加一行数据.............................. 56 3.11.3 保存修改结果.............................. 58 3.11.4 验证EditGrid中的数据................ 59 3.11.5 限制输入数据的类型.................. 60 3.12 属性表格控件——PropertyGrid.............. 63 3.12.1 PropertyGrid ................................. 64 3.12.2 只能看不能动的PropertyGrid ..... 65 3.12.3 强制对name列排序..................... 65 3.12.4 根据name获得value.................. 66 3.12.5 自定义编辑器.............................. 66 3.13 分组表格控件——group ......................... 66 3.13.1 分组表格简介.............................. 67 3.13.2 分组表格视图 Ext.grid.GroupingView...... 68 3.14 可拖放的表格.......................................... 69 2 目 录 3.14.1 拖放改变表格的大小...................69 3.14.2 在同一个表格里拖放...................70 3.14.3 表格之间的拖放...........................72 3.14.4 表格与树之间的拖放...................73 3.15 Grid与右键菜单........................................73 3.16 本章小结...................................................74 第4 章 表单与输入控件..........................................76 4.1 制作一个表单.............................................76 4.2 FormPanel和BasicForm详解................77 4.3 EXT支持的控件.........................................77 4.3.1 控件继承图.....................................77 4.3.2 表单控件.........................................78 4.3.3 基本输入控件 Ext.form.Field ........................78 4.3.4 文本输入控件 Ext.form.TextField ...............79 4.3.5 多行文本输入控件 Ext.form.TextArea..................80 4.3.6 日期输入控件 Ext.form.DateField ...............80 4.3.7 时间输入控件 Ext.form.TimeField ...............81 4.3.8 在线编辑器 Ext.form.HtmlEditor.............81 4.3.9 隐藏域Ext.form.Hidden ..........82 4.3.10 下拉输入框 Ext.form.TriggerField......82 4.4 使用表单提交数据.....................................83 4.4.1 EXT默认的提交形式.....................83 4.4.2 使用HTML原始的提交形式..........85 4.4.3 单纯Ajax.........................................85 4.5 数据校验.....................................................86 4.5.1 输入不能为空.................................86 4.5.2 最大长度和最小长度.....................87 4.5.3 借助vtype.....................................88 4.5.4 自定义校验规则.............................88 4.5.5 算不上校验的NumberField........88 4.5.6 使用后台返回的校验信息.............89 4.6 表单布局.....................................................90 4.6.1 默认的平铺布局.............................90 4.6.2 平行分列布局.................................91 4.6.3 在布局中使用fieldset ..............93 4.6.4 在fieldset中使用布局..............95 4.6.5 自定义布局：在表单中加入图片......96 4.7 ComboBox、datefield和timefield详解.......97 4.7.1 ComboBox简介..............................98 4.7.2 将Select转换成ComboBox.............99 4.7.3 ComboBox结构详解......................99 4.7.4 使用远程数据...............................101 4.7.5 ComboBox的高级配置................102 4.7.6 监听用户选择了哪条数据...........104 4.7.7 使用本地数据实现省、市、县 级联..............................................104 4.7.8 使用后台数据实现省、市、县 级联..............................................107 4.8 复选框和单选框.......................................110 4.8.1 复选框...........................................110 4.8.2 单选框Radio .................................111 4.9 文件上传...................................................112 4.10 自动把数据填充到表单中.....................113 4.11 本章小结.................................................114 第5 章 树形结构......................................................116 5.1 TreePanel的基本使用..........................116 5.1.1 创建一棵树...................................116 5.1.2 为树生枝展叶...............................117 5.1.3 tree的配置.................................118 5.1.4 使用TreeLoader获得数据........119 5.1.5 读取本地JSON数据.....................121 5.1.6 Struts 2的JsonPlugin.....................121 5.1.7 使用JSP提供后台数据.................122 5.2 树的事件...................................................125 5.3 右键菜单...................................................126 5.4 修改节点的默认图标...............................127 5.5 从节点弹出对话框...................................128 5.6 节点提示信息...........................................129 5.7 为节点设置超链接...................................129 5.8 直接修改树节点名称...............................130 5.9 树形的拖放...............................................131 5.9.1 节点拖放的三种形式...................131 5.9.2 叶子不能append.........................131 目 录 3 5.9.3 判断拖放的目标.......................... 132 5.9.4 树之间的拖放.............................. 134 5.10 树形过滤器TreeFilter...................... 135 5.11 利用TreeSorter对树进行排序.......... 137 5.12 树形节点视图—— Ext.tree.TreeNodeUI .................... 138 5.13 表格与树形的结合—— Ext.tree.ColumnTree .................... 139 5.14 本章小结................................................ 142 第6 章 拖放................................................................143 6.1 拖放简介.................................................. 143 6.2 拖放的简单应用...................................... 143 6.3 拖放组件体系.......................................... 144 6.4 拖放的事件.............................................. 146 6.5 高级拖放.................................................. 148 6.5.1 Basic........................................... 148 6.5.2 Handle ........................................ 149 6.5.3 On Top ........................................ 150 6.5.4 Proxy........................................... 151 6.5.5 Group........................................... 152 6.5.6 Grid............................................. 154 6.5.7 Circle ........................................ 155 6.5.8 Region ........................................ 157 6.6 本章小结.................................................. 158 第7 章 弹出窗口......................................................159 7.1 Ext.MessageBox.................................. 159 7.1.1 Ext.MessageBox.alert().... 159 7.1.2 Ext.MessageBox. confirm() ................................ 160 7.1.3 Ext.MessageBox.prompt()... 160 7.2 对话框的更多配置................................... 161 7.2.1 可以输入多行的输入框.............. 161 7.2.2 自定义对话框的按钮.................. 162 7.2.3 进度条.......................................... 162 7.2.4 动画效果...................................... 164 7.3 Ext.window的常用属性........................ 164 7.3.1 创建一个窗口.............................. 164 7.3.2 窗口的最大化和最小化.............. 165 7.3.3 窗口的隐藏与销毁...................... 167 7.3.4 防止窗口超出浏览器.................. 167 7.3.5 设置窗口中的按钮...................... 169 7.3.6 窗口的其他配置选项.................. 170 7.4 窗口分组.................................................. 171 7.5 向窗口中放入各种控件........................... 172 7.5.1 在窗口中加入表格...................... 172 7.5.2 在窗口中加入表单...................... 173 7.5.3 复杂布局...................................... 174 7.6 本章小结.................................................. 176 第8 章 布局............................................................... 177 8.1 布局的用途.............................................. 177 8.2 最简单的布局FitLayout........................... 179 8.3 常用的边框布局BorderLayout ................ 182 8.3.1 设置子区域的大小...................... 184 8.3.2 使用split并限制它的范围............ 185 8.3.3 子区域的展开和折叠.................. 187 8.4 制作伸缩菜单的布局——Accordion...... 191 8.5 实现操作向导的布局——CardLayout.... 192 8.6 控制位置和大小的布局—— AnchorLayout和AbsoluteLayout ............. 194 8.7 表单专用的布局FormLayout................... 199 8.8 分列式的布局ColumnLayout .................. 200 8.9 表格状的布局TableLayout ...................... 202 8.10 与布局相关的其他知识......................... 204 8.10.1 超类Ext.Conainter的公共 配置与xtype的概念................. 204 8.10.2 layout的超类Ext.layout. ContainerLayout................. 205 8.10.3 不指定任何布局时会 发生的情况................................ 206 8.10.4 使用Viewport对整个页面 进行布局................................... 206 8.10.5 使用嵌套实现复杂布局............ 207 8.11 本章小结................................................ 210 第9 章 工具栏和菜单.............................................211 9.1 简单菜单.................................................. 211 9.2 向菜单中添加分隔线............................... 212 9.3 多级菜单.................................................. 213 9.4 高级菜单.................................................. 214 9.4.1 多选菜单和单选菜单.................. 214 9.4.2 日期菜单...................................... 216 4 目 录 9.4.3 颜色菜单.......................................216 9.4.4 Ext.menu.Adapter菜单 适配器..........................................217 9.4.5 使用Ext.menu.MenuMgr统一 管理菜单......................................220 9.5 工具栏组件详解.......................................220 9.5.1 Ext.Toolbar.Button .............221 9.5.2 Ext.Toolbar.TextMenu.........221 9.5.3 Ext.Toolbar.Spacer .............222 9.5.4 Ext.Toolbar.Separator.......222 9.5.5 Ext.Toolbar.Fill..................223 9.5.6 Ext.Toolbar.SplitButton...223 9.5.7 为工具条添加HTML标签............224 9.5.8 为工具条添加输入控件...............225 9.6 分页工具条Ext.PagingToolbar.................225 9.6.1 Ext.PagingToolbar的基本用法.....225 9.6.2 向Ext.PagingToolbar添加 按钮组件......................................226 9.7 右键弹出菜单...........................................227 9.8 本章小结...................................................229 第10 章 数据存储与传输.....................................230 10.1 Ext.data简介............................................230 10.2 Ext.data.Connection....................230 10.3 Ext.data.Record .............................232 10.4 Ext.data.Store ...............................233 10.4.1 基本应用...................................233 10.4.2 对数据进行排序.......................234 10.4.3 从store中获取数据...............234 10.4.4 更新store中的数据...............236 10.4.5 加载及显示数据.......................237 10.4.6 其他功能...................................238 10.5 常用proxy.............................................239 10.5.1 MemoryProxy.........................239 10.5.2 HttpProxy..............................240 10.5.3 ScriptTagProxy..................240 10.6 常用Reader...........................................241 10.6.1 ArrayReader.........................241 10.6.2 JsonReader ...........................242 10.6.3 XmlReader..............................243 10.7 高级store.............................................245 10.8 EXT中的Ajax .........................................246 10.8.1 最容易看到的Ext.Ajax ........246 10.8.2 Ext.lib.Ajax是更底层的封装....247 10.9 关于scope和createDelegate() ....247 10.10 DWR与EXT整合..................................249 10.10.1 在EXT中直接使用DWR......249 10.10.2 DWRProxy............................250 10.10.3 DWRTreeLoader................252 10.10.4 DWRProxy和ComboBox......253 10.11 localXHR支持本地使用Ajax ...............254 10.12 本章小结...............................................255 第11 章 实用工具................................................... 256 11.1 EXT提供的常用函数.............................256 11.1.1 onReady函数..........................256 11.1.2 get函数....................................257 11.1.3 query函数和select函数.....260 11.1.4 encode函数和decode函数...263 11.1.5 extend函数.............................265 11.1.6 apply和applyIf函数..........266 11.1.7 namespace函数.....................266 11.1.8 Ext.isEmpty函数.................267 11.1.9 Ext.each函数........................268 11.1.10 Ext.DomQuery ....................269 11.2 用DomHelper和Template动态 生成HTML.............................................272 11.2.1 用DomHelper生成小片段..272 11.2.2 Ext.DomHelper. applyStyles函数.............275 11.2.3 Template模板....................276 11.2.4 Ext.DomHelper. createTemplate函数......278 11.2.5 复杂模板XTemplate..........279 11.3 用Ext.Utils.CSS切换主题..............281 11.4 悬停提示.................................................282 11.4.1 初始化.......................................282 11.4.2 注册提示...................................283 11.4.3 标签提示...................................283 11.4.4 全局配置...................................283 11.4.5 个体配置...................................284 11.5 使用Ext.state保存状态....................285 目 录 5 11.6 fx实现的动画效果................................ 288 11.7 局部更新网页内容................................. 288 11.8 Ext.util.Format............................. 290 11.9 使用Ext.util.CSS管理CSS样式..... 290 11.10 使用Ext.util.ClickRepeater 处理点击事件...................................... 291 11.11 使用Ext.util.DelayedTask 延时执行函数...................................... 293 11.12 使用Ext.util.TaskRunner 执行循环任务...................................... 294 11.13 混合型集合Ext.util. MixedCollection .......................... 295 11.14 使用Ext.util.TextMetrices 获得文本所占的高度和宽度................. 299 11.15 Ext.KeyNav处理导航按键............... 300 11.16 Ext.KeyMap为对象绑定按键功能.... 302 11.17 扩展...................................................... 304 11.17.1 扩展Date ............................... 304 11.17.2 扩展String......................... 306 11.17.3 扩展Function.................... 306 11.17.4 扩展Number......................... 308 11.17.5 扩展Array........................... 308 11.18 Ext.ux.Portal ............................... 309 11.19 Ext.Desktop .................................... 312 11.20 本章小结.............................................. 316 第12 章 一个完整的EXT 应用......................... 317 12.1 确定整体布局........................................ 317 12.2 使用HTML和CSS设置静态信息.......... 319 12.3 对学生信息进行数据建模..................... 320 12.4 在页面中显示学生信息列表................. 324 12.5 添加表单编辑学生信息......................... 329 12.6 为表单添加提交事件............................. 332 12.7 清空表单信息........................................ 335 12.8 删除指定的学生信息............................. 336 12.9 在Grid和Form之间进行数据交互......... 337 12.10 本章小结.............................................. 338 第13 章 通过Ext Framework 合理地 应用EXT.................................................. 339 13.1 Ext Framework简介................................ 339 13.2 Ext Framework架构解析........................ 342 13.2.1 主要的第三方包...................... 342 13.2.2 后台类关系图.......................... 342 13.2.3 前台组件关系图...................... 344 13.3 本章小结................................................ 347 附录A EXT 常见问题............................................ 348 附录B EXT 对AIR 的支持.................................. 355 附录C EXT 的版本变迁....................................... 364