Ext JS源码分析与开发实例宝典

前言

　　Ext JS是一款非常优秀的JavaScript框架，不但能方便地实现优美绚丽的Web应用系统，而且其源码架构的设计及实现令人叫绝。任何一种优秀技术都会有一批布道者去分析、研究并推广它，Ext JS也不例外。　　但是Ext JS结构过于庞大，大多数开发者只能是对着Ext JS的应用文档依葫芦画瓢地开发应用系统。这样一知半解的开发方式，会导致开发中出现众多问题，比如：性能低下、效率不高、开发出来的用户体验千篇一律等。而目前市场上Ext JS的书籍大部分都停留在对Ext JS的应用上。深入到Ext JS的实现原理及内部运行机制，这对开发者而言非常重要，因为这是用活用好Ext JS的关键所在。　　不是没有人去分析Ext JS的源码，但其源码架构宏伟，所需知识众多，开发者在阅读其源码时一般都是一知半解，而市面上却没有这方面的资料。笔者也是Ext JS源码分析大军中的一员，在解读其源码之后的那种兴奋和快乐，让自己觉得应该把它分享出来。　　在写了零散的源码分析文章后，却发现这样效果并不是很好，读者还是很难深入。为了让读者能更好地学习，最大限度地不让学习曲线过于陡峭，让爱好Web开发的人员也能体会到Ext JS开发的乐趣，遂萌发了编写这本宏大作品的想法，让开发者能充分、深入地了解Ext JS源码机制及实现并能将Ext JS最佳应用。　　读书的最高境界是厚积薄发，这是对读者的要求，而其背后也隐含着对作者的要求，如何引导读者厚积薄发，这本就应该是作者的义务。一本书的内容从定下主旨开始就是浑然天成的整体，如东家之子，增之一分则太长，减之一分则太短。内容的多寡与缺失都会影响它的完整性和艺术性。　　为了达到这个目的，本书的内容无论从哪个角度来看都应该是一条线串联着的。本书是Ext JS源码分析书，它把整个Ext JS的源码采用core→element→component 3个单词来串联。本书是Ext JS应用书，它采用网络办公系统实例应用贯穿着整本书的知识点。　　读者可以从这条线出发，慢慢地扩展细化，最终扩展到整个Ext JS体系。还可以通过整个Ext JS体系慢慢地收缩归纳，最终薄发到这条线上来。本书从内容的编排上来看也是一条线，它分成4个部分，每部分都有相关的章节。这4个部分的主要内容是Introduction（入门）、Core（核心）、Element（元素）和Component（组件）。通过这几部分，读者不仅能应用Ext JS进行开发，还能了解其工作原理和机制，知其然，亦知其所以然。　　写书是一项枯燥乏味的工作，但也是一种痛并快乐着的孕育过程。快乐的源泉来自读者的肯定。作者夜以继日的工作，最大目的就是为了交给读者一份最满意的技术书。但是Ext JS源码涉及的领域广泛，同时作者水平有限，书中难免有一些不足之处。恳请广大读者批评指正，并发E-mail到sharepub@126.com联系。

媒体关注与评论

　　随着浏览器的不断进步和RIA（Rich Interface Application。）的逐渐流行，JS（JavaScript）这门历史悠久的开发技术不断焕发出新的生机，开发人员为JS开发出各种框架，来提升开发的质量与效率，以适应Web 2．0时代Web应用程序的开发。在众多的框架中，Ext JS以其独特的设计、强大的功能和开源的优势，获得了巨大的成功。　　本书的作者通过清晰的实例，详细讲述了Ext JS的核心概念和实际应用，体现了作者高度的理论修养和丰富的实践经验。读者既可以从中体会Ext JS框架的设计思想，也可以直接按照书中的实例进行操作，解决开发中遇到的问题。同时，本书行文流畅，逻辑严谨，改变了通常技术书籍晦涩难懂的形象，这是本书的又一亮点。　　——诺和诺德(中国)科技有限公司，NNIT(China)，高级开发技术研究与培训专家，杜新润　　本书很全面地讲解了Ext JS框架，以及其他类似的JavaScript框架，能让初学者很快上手。通过不同的开发环境，如VS、dw、Eclipse，配置Ext JS的智能感应功能，提高Ext JS的开发效率与开发速度。对Ext JS的体系结构描述清楚，通俗易懂，通过简单的例子，介绍了Ext JS 3．0对UI的应用、DOM元素、事件、数据的处理等。逻辑层次清晰，由浅入深地进述了Ext√S的点点滴滴。虽然只看了部分章节，但也能体会作者对Ext JS的每一个要点都讲得很详细，是一本难得的好书。　　——中国软件工程网(www.rigc.net)，全体开发工程师　　本书层次清晰，层层深入地进行例子讲解，案例丰富，介绍了Ext JS的概念和应用技巧。结合实际的项目讲解Ext JS在UI和整体项目上的应用特点，值得前端设计人员和Ajax爱好者学习。　　——成都微核科技，界面工程师，David．heii.R 

书籍目录

第1部分　快速入门 1第1章　Web如此美丽，初探Ext JS 21.1　Ext JS是什么 21.2　为什么选择Ext JS 31.3　如何学习Ext JS 51.3.1　获取源码并部署 51.3.2　开发工具的智能提示 51.3.3　文档和实例的学习 81.3.4　学习论坛 91.4　Ext JS体系结构 91.4.1　体系结构 91.4.2　文件结构 111.5　小结 13第2章　Ext JS 3.0实例入门 142.1　准备工作，配置环境 142.2　看似简单的登录页面，隐藏好大的学问 152.2.1　页面布局 162.2.2　表单布局 182.2.3　验证码 202.2.4　表单验证 212.2.5　表单提交 222.3　主框架页面 242.3.1　主框架页面布局 262.3.2　左边导航菜单 282.3.3　右边工作区域 302.4　子页面 322.4.1　数据处理 322.4.2　列表 342.5　小结 35第2部分　核心技术 37第3章　Ext JS核心基础 383.1　继承的扩展 383.1.1　对象的继承 383.1.2　类的继承 393.1.3　Ext.extend扩展 403.2　函数的扩展 423.2.1　从一个错误说起 423.2.2　函数的委托 433.3　数组及集合 443.3.1　JavaScript数组 453.3.2　Ext JS集合操作 463.4　String的转换 503.4.1　String转换的基本知识 503.4.2　String和JSON转换 503.4.3　查询字符串与对象转换 523.5　Date的使用 533.5.1　日期格式化 533.5.2　日期的比较及计算 553.6　定时任务 563.6.1　有状态的定时任务管理 563.6.2　定时任务管理器 583.7　小结 60第4章　你必须知道的Ext JS事件机制 614.1　浏览器事件机制 614.2　Ext JS元素事件 634.2.1　Event对象 634.2.2　EventManager 674.3　基本事件扩展 714.3.1　DomReady处理 714.3.2　快捷键的实现 724.3.3　导航键的实现 744.3.4　鼠标按住事件 754.4　Ext JS组件事件 764.4.1　事件对象 774.4.2　组件的事件机制 784.4.3　基于拦截的事件实现 814.4.4　组件及元素事件结合 834.5　扩展TabBox事件 844.5.1　焦点 844.5.2　扩展TabBox导航 854.5.3　自定义TabBox事件 874.6　小结 89第5章　模板模型，组件开发的基石 905.1　Ext JS模板概述 905.2　正则表达式基础 915.2.1　正则表达式引擎 915.2.2　字符匹配 935.2.3　选择、分组及引用 955.3　正则表达式的使用 975.3.1　exec和match 975.3.2　replace函数 975.4　基本模板 995.4.1　模板的构建 995.4.2　应用动态数据 1005.4.3　编译模板 1015.5　扩展模板 1035.5.1　实现原理 1045.5.2　编译Xtemplate模板 1075.5.3　为Xtemplate应用动态数据 1105.6　模板问题及改进 1105.6.1　模板的问题 1105.6.2　问题的解决 1125.7　通信录的实现 1145.7.1　应用DataView 1155.7.2　数据分页和过滤 1175.7.3　通信录中的信息 1185.8　小结 119第6章　改善用户体验，交互数据模型 1206.1　Ajax请求 1206.1.1　从网络通信协议开始 1206.1.2　手动实现Ajax 1236.1.3　便利函数让调用更加方便 1266.1.4　表单请求 1276.1.5　跨域请求 1316.2　Direct请求 1346.2.1　Comet请求 1346.2.2　RPC请求 1376.3　代理请求 1416.3.1　REST风格 1416.3.2　代理请求的处理过程 1426.3.3　MemoryProxy的扩展 1456.4　数据解析的实现 1476.4.1　定义表结构 1476.4.2　解析表数据 1526.4.3　数组解析的扩展 1566.5　数据回写 1576.5.1　组装请求参数 1576.5.2　保存之后更新 1596.6　数据存储 1606.6.1　构建Store对象 1606.6.2　载入数据 1626.6.3　保存数据 1646.7　DWR数据交互 1666.7.1　DWR请求扩展 1676.7.2　DWR数据解析 1696.7.3　CRUD操作 1716.8　小结 172第3部分　基于元素的开发 173第7章　元素扩展，让开发更灵活 1747.1　Ext. DomHelper类 1747.1.1　元素创建 1747.1.2　元素插入 1757.2　Ext.DomQuery类 1787.2.1　实现原理 1797.2.2　查询及过滤实现 1807.2.3　编译解析 1827.3　Ext JS元素架构 1857.3.1　Ext.Element元素 1857.3.2　Ext.CompositeElementLite 1877.4　表单实例 1897.4.1　实现并载入表单 1897.4.2　计算相关费用 1917.5　小结 195第8章　Ext JS样式的完美应用 1968.1　样式基本操作 1968.1.1　创建元素 1978.1.2　元素定位 1988.1.3　可视及其他 1998.2　 JS操作样式 2008.2.1　style的操作 2018.2.2　class的操作 2038.2.3　动态加入CSS Rules 2048.2.4　重构它们 2068.3　Dimensions操作 2078.3.1　宽高操作 2088.3.2　坐标定位操作 2118.3.3　重构它们 2148.4　相对定位与约束 2158.4.1　元素相对定位 2168.4.2　scroll定位 2198.4.3　Resize元素定位的实现 2208.5　ImageCropper的实现 2248.5.1　创建容器 2258.5.2　创建三层图片并载入 2268.5.3　初始化Resize和拖曳 2278.5.4　显示选择内容 2298.6　小结 231第9章　让Web页面动起来 2329.1　动画的原理 2329.1.1　原理实现 2329.1.2　改进的实现 2349.2　Ext JS动画实现 2379.2.1　Ext JS动画管理器 2379.2.2　动画对象 2389.3　动画的进一步深入 2439.3.1　动画类型 2439.3.2　动画算法 2479.3.3　Fx特效处理 2519.4　扩展Ext JS矢量图 2549.4.1　excanvas基本应用 2549.4.2　excanvas高级应用 2619.5　交互式动画报表图 2669.5.1　基本折线图 2669.5.2　动画的实现 2739.5.3　交互式选择的实现 2759.5.4　ToolTip的实现 2799.6　小结 282第10章　拖曳技术，让用户也动起来 28310.1　Ext JS拖曳原理剖析 28310.1.1　如何选中元素 28310.1.2　如何实现鼠标移动位置 28410.1.3　如何确定元素目标位置 28510.2　Ext JS拖曳架构 28510.2.1　拖曳共性处理 28510.2.2　拖曳个性处理 28910.3　拖曳形式的选择题应用 29710.3.1　选择题的实现 29710.3.2　选项拖曳的实现 29910.4　拖曳高级扩展 30310.4.1　拖曳元素状态处理 30410.4.2　目标元素状态处理 30610.4.3　把拖曳目标和拖曳元素综合起来 31110.5　拖曳定制流程 31510.5.1　基本的流程图 31510.5.2　拖曳的实现 31910.5.3　拖曳的完善 32410.6　小结 327第4部分　深入组件的开发 329第11章　Ext JS组件模型的架构解析 33011.1　认识Ext JS组件 33011.2　生命周期设计 33211.2.1　初始化 33211.2.2　渲染表现 33411.2.3　销毁组件，释放系统资源 33511.3　可扩展性设计 33711.3.1　类继承的支持 33711.3.2　事件的支持 33711.3.3　插件的支持 33811.3.4　可配置的支持 33811.3.5　模板方法的支持 33911.4　可管理性设计 33911.4.1　全局统一管理 33911.4.2　组件类别管理 34011.4.3　内部状态管理 34011.5　组件分析法 34311.5.1　生命周期分析 34311.5.2　配置项分析 34511.5.3　方法及属性分析 34511.5.4　事件分析 34711.5.5　组件特性 34711.6　如何自定义组件 34811.6.1　组件的需求 34811.6.2　按生命周期来编写组件 34811.6.3　重构 34911.6.4　编写文档 35011.7　小结 350第12章　Ext JS面板，信息提示更人性化 35112.1　浮动层（Layer） 35112.1.1　shim实现 35112.1.2　shadow实现 35212.1.3　约束定位 35512.1.4　浮动层显示 35712.2　容器（Container）布局 35912.2.1　生命周期分析 35912.2.2　容器特性 36112.3　面板（Panel）布局 36312.3.1　面板组成 36312.3.2　面板样式 36712.3.3　面板的折叠/展开 37012.4　窗体（Window）布局 37212.4.1　最大最小化 37212.4.2　改变大小 37512.4.3　窗体显示问题 37612.5　工具提示 37712.5.1　Ext.Tip类 37712.5.2　Ext.ToolTip类 37812.5.3　Ext.QuickTip类 37912.6　气球提示（BalloonTip) 38212.6.1　实现BalloonTip组件 38312.6.2　进一步完善 38812.7　小结 393第13章　Ext JS 华丽的容器布局 39413.1　认识布局的流程 39413.1.1　布局概述 39413.1.2　布局的流程 39513.2　Border布局 39713.2.1　如何渲染 39813.2.2　如何计算布局区域 39913.2.3　如何实现折叠与展开 40213.3　锚定位布局 40513.3.1　AnchorLayout布局 40513.3.2　AbsoluteLayout布局 40713.3.3　FormLayout布局 40813.4　自适应布局 40913.4.1　FitLayout 41013.4.2　AccordionLayout 41013.4.3　CardLayout 41213.5　表行列布局 41313.5.1　ColumnLayout 41313.5.2　RowLayout 41413.5.3　TableLayout 41513.6　Box布局 41813.7　如何扩展TableFormLayout 42013.8　小结 422第14章　Ext JS Form的交互式表单 42314.1　FormPanel聚散地 42314.1.1　Form关系图 42314.1.2　与BaseForm关联 42514.1.3　与Field关联 42614.1.4　验证操作 42714.1.5　数据处理 42914.1.6　FieldSet 43314.2　Field组件 43414.2.1　Field的创建 43514.2.2　Field的验证 43614.3　文本输入组件 43814.3.1　单行文本输入组件 43814.3.2　多行文本输入组件 44114.3.3　文本编辑组件 44214.4　选择组件 44714.4.1　单个选择组件 44714.4.2　选择组 44814.5　下拉组件 45214.5.1　TriggerField 45214.5.2　Combox 45414.5.3　多选组件扩展 45914.6　注册页面的实现 46514.6.1　基本的Form组件应用 46514.6.2　上传处理 46814.7　小结 471第15章　Ext Grid组件让数据更直观 47215.1　认识Ext JS 的Grid 47215.1.1　概述 47215.1.2　如何创建GridPanel 47315.1.3　GridPanel如何运行 47415.1.4　可编辑的GridPanel 47615.2　列模式 48015.2.1　CM分析 48015.2.2　CM的高级应用 48215.3　选择模式 48515.3.1　RowSelectionModel 48515.3.2　CheckboxSelectionModel 48815.4　视图 48915.4.1　Grid生成HTML内容 48915.4.2　如何构建表结构 49115.4.3　导入数据 49515.4.4　通过流程进一步分析 49715.5　分页栏 49915.5.1　载入数据进行显示 50015.5.2　请求数据 50115.6　对Grid的改进 50215.6.1　下拉框编辑的问题 50215.6.2　嵌套表格的问题 50515.6.3　多表头操作 50715.7　单元格实现跨列运算 50915.7.1　单元格多选模式 51015.7.2　公式统计计算 51215.7.3　应用实例 51515.8　小结 516第16章　深入Ext JS 的树形展示 51716.1　树组件的原理 51716.2　Ext JS树组件的分析 51916.2.1　树的创建 52016.2.2　树的生命周期分析 52016.3　树组件节点 52216.3.1　基本节点 52216.3.2　TreeNode类 52316.4　树组件的事件 52916.4.1　事件的流程 52916.4.2　事件的选择模式 53216.5　完善树的功能 53316.5.1　树的数据 53316.5.2　编辑、过滤及排序 53616.6　ECOTree的实现 54016.6.1　树的基本实现 54116.6.2　节点的实现 54716.6.3　折叠、编辑、拖曳及其他完善 55016.7　小结 554第17章　基于Ext JS Menu组件的快速开发 55517.1　Action类 55517.1.1　Action类的作用 55517.1.2　Action类的运行流程 55617.2　Button类 55817.2.1　生命周期 55817.2.2　样式处理 55917.2.3　状态切换 56017.3　开发个性的工具栏 56217.3.1　如何解析工具项 56217.3.2　如何进行布局 56317.3.3　竖形工具栏的实现 56617.4　自己来设计菜单栏 56817.4.1　菜单的显示 56817.4.2　菜单的动作 57017.5　类UE编辑器的实现 57217.5.1　基本的编辑器 57217.5.2　活动工具栏 57417.6　小结 578

编辑推荐

　　全面剖析Ext JS 3.0的架构原理，透彻体悟Ext JS的代码之美，讲解近70个DEMO实例，配套DVD中包窗大量源码和案例文件。

作者简介

《Ext JS源码分析与开发实例宝典》从Ext JS实现的基本功能开始讲解，从两个方面对Ext JS进行整体上的概述，让读者从宏观上去把握ExtJS框架。接下来讲解Ext JS核心基础知识，包括事件机制、模板模型、数据模型以及对类、函数、字符串、日期、数组及定时任务这6个类进行扩展。然后讲解Ext JS基于元素的开发，包括动画特效和拖曳实现等。最后深入讲解组件的开发，对布局、模型及4大组件一一进行剖析。

《Ext JS源码分析与开发实例宝典》语言通俗易懂、版式清晰，可以作为Web应用开发的参考手册，也可以作为Ext JS应用开发的培训教材。

图书封面

---

 Ext JS源码分析与开发实例宝典下载 更多精彩书评

---