深入剖析ExtJS+2.2实现及应用连载(全集)+DOC精排版.doc

窗体顶端深入剖析ExtJS 2.2实现及应用连载(1):导言 导读 ExtJS是一个非常优秀的框架，不但能实现优美绚丽的Web应用。而且其源码架构思想及实现令人叫绝。任何一种优秀技术都会有一批布道者去分析研究并推广它，比如Spring。但是ExtJS结构过于庞大，相当多的开发者只能是对着其应用文档依葫芦画瓢地开发应用系统。这样一知半解的开发会导致开发中出现众多问题，比如性能，内存等等。而目前市场上ExtJS的书籍都是仅仅介绍其应用，很少有书去讲解其实现原理及内部运行机制，但是其对于开发者来讲是非常重要的。不是没有人去深入分析ExtJS的源码，但其源码架构宏伟，所需知识众多，开发者在阅读其源码时一般都是一知半解，而市面上却没有剖析ExtJS技术这方面的书籍。笔者也是ExtJS源码分析大军中一员，在解读其源码之后那种兴奋和快乐，让自己觉得应该把它分享出去。于是在Blog中写了相关的源码分析文章。但是发现这样不能起到很好的效果，因为不是所有读者都和自己一样，曾经枕着JavaScript权威指南、Ajax in Action书籍入眠。于是就萌发了把其形成一个完整体系，让开发者能深入了解ExtJS源码机制及实现并能将ExtJS最佳应用。写书是一项枯燥乏味的工作，但也是一种痛并 快乐着的孕育过程。对于作者呕心沥血完成的作品，其出版赚稿费本来是可以被人理解的。但是一些投机者让技术书市场失去它本来应有的纯洁和崇高。笔者骂过很 多让自己花冤枉的写书者，为了不挨骂（那是不可能的），每时每刻都在想着给读者一份最满意的技术书。最高境界的读书是厚积薄发，这是对读者要求，而其背后也隐含着对写者的要求，如何引导读者厚积薄发，这本是就是写者的义务。一本书的内容从其定下主旨开始就是浑然天成的整体，如东家之子，增之一分则太长，减之一分则太短。内容的多寡与缺失都失去它的完整性和艺术性。为了达到这个目的，图书的内容无论从那个角度来看都应该是一条线串联着的。本书是ExtJS源码分析书，它把整个ExtJS的源码采用coreelementcomponent三个单词来串联。本书是ExtJS应用书，它采用网络办公系统实例应用贯穿着整本书的知识点。读者可以从这条线出发，慢慢地扩展细化，最终到扩展到整个ExtJS体系。还可能通过整个ExtJS体系慢慢地收缩归纳，最终薄发到这条线上来。本书从内容的编排上也是一条线，它分成五个篇章，每个篇章都着相关的章节。这五部分是Introduction（入门）、Core（核心）、Element（元素）、Component（组件）、Apply(应用)。通过这几部分，读者不仅能应用ExtJS进行开发，而且还能了解其工作原理和机制，知其然知其所以然。本书有以下几个特点：首先这是一本源码分析书籍，源码分析不是简单地在其源码中标上注释，然后贴到书上充内容。它从其机制原理讲起，分析共为什么这样实现。本书的源码分析首先是从其机制，原理或流程入手，通过手动实现该原理或机制，之后一步一步引入到ExtJS中的源码实现。接着对其进行深化扩展和性能等方面的讲解。如对于动画特效，先手工实现，之后一步步地分析ExtJS中实现，最后觉得其不完整，加上JS矢量图的动画扩展。其次它是一本ExtJS应用书籍，与其它应用书籍仅仅对ExtJS文 档实例进行简单改造不一样。除了阐述原理流程的小应用之外，每章都有综合本章知识点应用的实例，而该实例又是办公系统一部分。对于这些综合实例，它采用迂 回连续的方式进行布置，它在深入应用本章知识的同时还会采用后面章节的知识点。待到其后再去深入其知识点和应用。这样让读者先有实例应用的了解，之后深入 其原理机制，再之后深入该知识点应用，这样就形成循序渐进的过程，同时也给每章增加了适当的难度。如事件机制那章中的Tabbox组件事件编写，它是建立在第二章的Tabbox组件基础之上，又引出Tree组件相关基本应用，在深入本章知识点同时又引出新的知识点。这是一本深入JS技术书籍，源码分析是要用到JS知识，JavaScript权威指南对于JS入门的确很好，但是这里结合ExtJS源码对着JS知识点的应用来讲解，能达到事半功倍的效果。对于JS知识点，本书没有复制其它书籍内容，而在深入分析其它书籍没有讲到的内容（可以说本书并不是针对于那么JS初学者，对于初学者，在书上也给出其应该参数的书籍），对其重点难点一一进行剖析。如正则表达式，就分析了其解析原理和如何编写高效率的正则表达式。连对于eval函数，本书都对它进行了详细地分析。它还是一本ExtJS扩展书籍，本书是站在一定高度去分析ExtJS，对于其源码中不足之处，笔者提出很多解决方法，如对于其继承采用xx.superclass.constructor.call继承的方式进行了扩展，使它支持this.supper。对于函数扩展，在结合所有的类库实现的基础上，也对其createDelegate进去扩展。当然更不用讲对于应用组件的扩展进行自己的组件库。上面四个特点贯穿在本书的五个篇章之中： 入门篇是对ExtJS进行一个整体的概述，让读者从宏观上把握整个ExtJS。它包含二章，第一章是通过理论性的图表及文字去概述整个ExtJS及其相关。而第二章则是带领读者通过一个实例来纵览整个ExtJS的功能应用。读者不但能从理论上把握ExtJS，还能从实例中去了解整个ExtJS。核心篇则是深入入门篇的所讲的ExtJS的核心基础知识。该步篇包含一个机制，二个模型，六个扩展。其中对于类、函数、字符串，日期、及定时任务的六个扩展在第三章介绍。这是ExtJS中核心中核心。机制指的是事件机制，ExtJS事件不仅扩展了浏览器的事件机制，同时还采用观察者模式构建组件事件机制用来架构整个ExtJS，这个在第四章，二个模型分别指是其模板模型和数据模型，ExtJS的显示模块化和数据分离化就是通过这两个模型完成，它们分别在第5，6章。元素篇是对浏览器DOM元素进行了扩展的相关讲解。它有三个基本应用和两个效果。两个效果分别是其动画特效和拖曳实现。在第9，10章中深入浅出地分析了它们的原理、机制及扩展应用。三个基本应用是操作，查找和样式。其中操作和查找是Dom元素必不可少的基本，在第7章中结合ExtJS元素的这方面扩展来进一步深入对DOM元素的理解和使用。样式是元素及至整个ExtJS中非常重要的部分，它是构建ExtJS绚丽多彩的基础。在第8章中，我们会细化CSS让读者了解到样式的强大功能。组件篇是ExtJS的重点，因为应用都是围绕着组件，学好ExtJS，必须要学好组件。该篇内容分成一个布局二个模型四大组件。布局是用来进行页面排列的，ExtJS提供了九大布局，在第13章中，除了分析应用这九大布局之外，还会扩展自己的布局。二个模型指的是组件模型和容器模型。一些组件都遵循组件模型，在第11章，我们会分析它的原理，应用等。对于容器模型，则是放在第12章中，布局是容器的布局，在这一章，我们会详细地分析panel等布局的容器的应用。对于Form，Grid，Tree，Menu四大组件则分别在其后的四章进行分析讲解。应用篇是介绍在开发使用ExtJS的经验。第18章通过性能，调试，定制ExtJS等方面介绍如何在应用开发使用ExtJS。第19章则是把办公系统的例子综合出来，通过一个实例要总结本书的内容。无论如何，作者水平毕竟有限，书中难免会出现这样那样的错误，但是作者在写书时决不会回避任何的问题和难点，对于一些别人回避的点都采用作者自己的思考要解释。当然这或许也会有一些问题，但在书中都会标明，如有不对之处，请读者指出。注：本书还没有完成初稿，在语言表达、文字错别字等都有会很多问题的，现在以连载的形式放在Blog（/jxnuprk或/）。希望读者能指出其中不足。多多交流。同时能和所有JS爱好者成为朋友。QQ群：62247336。深入剖析ExtJS 2.2实现及应用连载(2):为什么要学习ExtJS 第1章 Ext概述深入剖析EXT 2.2及应用连载 版权所有，谢绝转载 作者：彭仁夔 QQ：546711211Ext以其绚丽的样式吸引了web开发者的眼球，以其丰富的文档和实例诱使开发者投身其中。从YUI-Ext到Ext2.0这期间吸引了无数的开发者，形成了用户众多，文档丰富的JS框架。同进也奠定了Ext的成功。本章将针对于Ext进行宏观性的概述，使读者对Ext有个整体的认识。本章主要内容：u 认识和如何学习Extu Ext的功能及说明1.1 Ajax模式前二年，Ajax异军突起，web2.0风靡一时。各式各样的Js类库如雨后春笋般涌出。这些框架可以分成两类，一类是以prototype、jquery为主的辅助类库。另一类以qooxdoo、Ext为主的Ajax富客户端类库。辅助类库主要为传统的web开发方式提供方便的JS开发。而富客户端类库则是完全采用Javascript来构建客户端的表现效果。 Ajax是新名词，但不是新技术。它是DOM，CSS，javascript,XML等众多成熟技术的集合。然而这个新名词的出现，引起众多的程序开发者关心，在web开发中掀起重重波澜，其主要原因是它在在web开发中扮演了一个全新角色。它改变了web开发模式，推动了web2.0的发展。传统的web开发模式是一种请求-刷新-响应的模式。即每当用户通过单击按钮或链接向服务器发送请求时，都由服务器接收并处理。处理完毕后服务器将信息发送至浏览器进行显示。在服务器的处理时间里，浏览器是处在loading中，显示空白且处在无响应状态。用户唯一能做的就是等待，导致极差的用户体验。在传统的web开发模式中，用户每个请求返回的都是一个显示的页面，即使是交互式的（form）的web设计。其浏览器只是被动地接收并显示页面的工具，它不能决定需要什么，请求什么，仅仅是显示服务器端传输过来的页面。而在很多情况下，请求的操作仅仅是对页面中小部分内容的修改。根本用不上抛弃当前的页面，而重新请求修改之后的新页面。Ajax开发模式给了浏览器主动权，它可以主动地有选择地向服务器请求它所需要的数据。通过Ajax的模式，开发者可以进行一个页面对应一个完整的应用系统的设计。浏览器在得到服务器的响应之后，它可以根据响应的数据来动态修改页面的局部显示。减少网络传输。加快浏览速度，同时还提高了用户体验，不用再对着空间的loading状态发呆。按理说Ajax模式是先进的，优秀的。但是在现实的应用中，还是有一些问题，如利于搜索引擎的搜索，用户的习惯改变等方面。于是在应用中出现了两种形式。一种是Ajax模式和传统的web开发相结合。基本上采用传统的web开发模式,而在需要较好的用户体验的（如交互）时候就采用Ajax模式。日常用得较多的几种有：输入前提示和关连下拉选择，相片的lightBox。这样就没有改变用户形成的习惯，同时也提供了较好的用户体验。一般来讲，这种模式适用于网站开发，它主要是提供客户的浏览信息。且交互不多。第二种形式是富客户端表现。它不像网站一样主要提供浏览的信息，而是提供给用户强大的交互功能。典型的应用有网络办公系统。这种B/S结构的应用是从C/S结构迁移过来的。用户要求是如C/S一样操作方便且UI富有表现力。在Ajax没有出现之前，Flash，applet就是为了实现这个目标。但是它们还是要客户端上装有flash,java等工具。而Ajax却是轻量级的。只需要浏览器。现在网页的表现的处理从服务器端转移到客户端上的浏览器上，那么对于浏览器的展现的CSS，DOM，JavaScript技术就应该受到应有的重视。但是各大厂家的浏览器并不兼容。这就给于开发者一个巨大的难题，难道开发应用系统还要去精通各个浏览器吗？为了解决这个问题，同时又能方便开发者使用javascript，大量的jS框架或类库出现了。对于ajax模式和传统的web开发相结合的web应用，我们可以通过采用prototype，jquery等在简化客户端表现层的开发。那么对富客户端呢？ YUI类库采用组件的形式构建网页的小模块。但是它只是一个松散组件集。而我们需要的是如桌面应用开发那样的UI。Dojo看是一个很前途的框架，背后有大公司支持，但是其效率等各方面不敢让人恭维。Qooxdoo是一个完全的类桌面的框架，却没有发展起来。Ext的缔造者Jack Slocum看到这个市场，在YUI基础上进一步的构建，加上绚丽的样式形成了YUI-EXT,吸引了web开发者的眼球，同时它也走上javascript类库的大舞台。在Ext的发展初期，开源社区的高涨的热情的作用，Ext形成丰富的多国语言文档和使用实例，渐渐得到广大开发者的认可。从1.1稳定版本到2.0版本，Ext经历了脱胎换骨过程。把YUI-Ext更名为Ext，把依赖YUI的部分整理形成自己的类库，独立门户。而且在2.0.2之后把之前的开源GPL licence也改成LGPL的licence。 不管怎么样，它能这样做，可以看出其推广的成功性。1.2 为什么要使用Ext在java开发中，选择适合项目的框架是件为难的事情，要从团队开发成员的技术使用和项目的需求等各方面的考量。选择太多，而javascript类库的选择也是面临同样的情形，prototype，jquery，mootools,YUI，dojo等等。上面是对于开发者在选择框架方面，那么对于学习者，选择学习框架的使用也会面临这种选择。学会流行且好框架能使读者找到更好工作或在技术方面更进一步。Ext值不值得学习呢，值不值得在项目中选用呢？学习它要花多大的成本呢？每一种框架都有其适用范围，Ext并不是设计成为通用的js框架，它仅仅是为了开发者在开发富客户的B/S应用中提供丰富的UI组件，便于快速开发，提供效率。由此可以看出它并不适合网站的开发，只适合于富客户端的B/S系统的开发应用。下面我们就Ext的优点做一个简单的说明：u 统一的主题（theme）通过主题，样式能从UI组件中解耦分离出来。对于应用而言，可以根据不同的主题来统一改变风格。解耦的优点就是组件和主题能各自单独开发。使用UI组件时，可以不必关心主题。完成之后根据需求或喜好选择套用主题。Ext提供2套主题模板，开发者在一般情况下，不太需要CSS，photoshop等美工方面的知识就可以开发出绚丽的应用系统。u UI与数据解耦众多java框架都采用MVC模式作为其架构模式。Ext在架构时也借鉴了MVC思想，它把主题与UI组件解耦，把UI组件和数据解耦。在设计UI时候，可以不必考虑各种各样的数据形式，可以采用统一的数据访问接口的形式去访问操作数据。 u 丰富的UI组件Ext的主要目的是构建UI组件，并提供给开发者使用。它提供众多功能强大、使用简单方便的UI组。同时在其论坛和例子中也提供了众多的扩展的组件。开发者能很方便利用这些组件来进行开发，同时这些UI组件还有着无与伦比的扩展性，开发者完全可以形成自己的UI组件库。 u 方便测试与调试JS调试一直都是个问题。一些浏览器也有着插件来完成调试工作。但是它们在准确度，精度上都或多或少有些问题。Ext采用log的形式提供了开发时调试的使用，在使用Ext调试时就可以跟踪进入Ext类库的内面，分析其运行的状态以及发生错误的原因。 u 优秀的源码Ext的源码设计精妙，结构清晰。匠心独用。其源码的文档丰富，是学习JavaScript的最好的教科书。其代码中的拦截思想和编译的实现，我们可以看作是天才之作。如能分析其源码，对于在javaScript的领域中水平能迅速提高。光是其功能的优秀是不够的，有很多优秀的框架并没有什么人气，那么Ext呢？在选择类库的时候，还得考虑其人气，人气高一是公司招人容易，成本低，二是碰到问题时，在论坛或其它的地方，人家可以早就碰过交解决或很早地帮助解决。在Extjs的官方网站就列出差不多100家的大公司在使用的Ext。其中著名的公司有：Adobe、AIG、Microsoft、Borland、CNN、SAP、Sun、Sony、HP、IBM等。国内也有大量的公司在使用Ext。因为很多都是运行在内网中，不便于统计。但是金蝶公司就在它的软件中容入Ext的早期版本。 我们只要进入一个JS的论坛就可以了解Ext的使用情况。很多论坛都是讨论Ext的贴子占绝大多数。 如果从其功能，人气还不够的话，那么其丰富的文档绝对是可以打动人的。我们下载了Ext的源码包中，其不但是包括了Ext的使用文档。该使用文档对Ext的每个功能，每个属性，每个事件都进行了一清二楚地说明。更让我叫妙的它还提供了日常开发的经常使用的例子。很多时间只要通过对其例子进行改写，一个不懂JS的人都可以完成非常备强大的功能出来。 深入剖析ExtJS 2.2实现及应用连载(3):ExtJS体系结构1.3 Ext体系结构在决定使用或学习Ext之后，我们得了解一下Ext的整个体系结构。它有一百多个类，几十个组件和众多的方法，基本上为客户端开发提供了所有必要的功能。从整体上来讲它可以分成四大模块，每个模块又可以分成各个小模块。它采用了分层架构方式，如下图：从上图中可以看出，Ext的整体架构分成了四个部分：核心，元素，数据，组件。这四大部分采用分层梯形结构。核心功能是为元素扩展、数据处理、UI组件而服务的，它是Ext中最基础最低层的实现。元素扩展则是对javaScript中dom元素进行扩展，使其使用起来更为方便。数据处理是Ext和服务器进行数据传递交互的功能。开发者只要使用UI组件及数据处理的功能就可以完成应用系统的绝大多数任务。下面我们就简要分析其各个模块。核心功能核心功能是Ext的最底层架构，它提供一些通用的方法或属性。所有上层的类及组件的实现都是建立在它基础之上。核心功能包含事件处理，模板功能，继承特性，原生对象扩展等。就是有这些核心功能，Ext组件架构才有着良好的扩展性和伸缩性。这些核心功能还使UI组件有有着良好的易用性、代码重用等。Ext即是一个命名空间，也是一个静态类。它提供统一的入口。这个入口实现了如继承(extend)，扩展(apply)等功能，同时还对浏览器的兼容做了处理。继承支撑着整个Ext的组件架构。对于UI的设计，事件机制是必不可少的部分。Ext的事件可以分成浏览器原始事件和自定义事件两部分。对于原始事件，它采用了包裹封装成组件的事件。对于自定义事件，主要是为了扩展组件的目的而设计的。通过组件自定义事件，开发者可以在组件运行的某一时刻扩展组件的功能。达到各自需要的效果。模板功能也是为重用而设计的，与组件重用不同，它是为了重用HTML片断。组件的重用是通过继承来重用其方法和属性，模板的重用是通过插值的方法来重用相同的HTML标签内容。在其核心功能，有很大一部分是用来对JavaScript的原生对象或原生方法进行扩展。如Function、Date、String、Array及定时任务等。JavaScript中的九个原生对象中有一部分是直接对于其进行扩展，有一部分是在其基础上构建其的类，如Ext.util.MixedCollection，它就是用来集合的功能，与Array的功能相似但更强大。这一部分内容将在第3、4、6章进行详细地讲解。数据处理数据处理是客户端的数据统一操作的接口。不管是从服务器返回的数据还是客户端自行生成的数据。都可以通过该接口来统一操作。这样就为组件的数据操作提供了极大的方便。Ext的data处理分成三部分，store是统一对组件或开发的接口，它的数据是通过proxy从服务器端（包含跨域）或本地的客户浏览器中获取原始数据。从原始数据到store的统一格式的中间还有一步，那就是对于不同的形式的原始数据(xml,json等)进行去解析。Reader就是完成解析功能。通过代理，分析，储存三步，呈现给开发者的数据就如数据库储存的二维表的结构数据一样。有着排序，统计、查询，更新的功能。完全可以把store看成一个客户端的临时数据库。这就是组件对数据的操作提供巨大的方便。在Ext的实现中，它并没有完全把data使用统一的开发的接口。data采用了两维表的形式，其数据应用的是针对于大量的数据处理。Ext针对于如表格、相关的列表（list）这样的需要多行的数据的组件采用了data来进行统一的处理。对于Tree组件，它采用TreeLoad来单独进行其数据处理，在Form的提交中，它采用直接的URL的Ajax的请求提交。尽管它们的数据格式和二维表的形式有点差距，但是还是通过一定的方式统一在Data接口。这样所有的数据请求都是通过data来处理，那样对于测试、开发等方面都能提供更大的优势。这一部分内容主要是在第5章进行分析，对于分散的数据处理，如TreeLoad将在各自己的组件讲解中进行分析。元素扩展Ext元素对Dom元素进行功能扩展，它解决Dom元素的兼容、内存泄露等众多问题。它包含dom原生元素本身扩展、CSS Selector实现，动画特效处理及拖曳等方面的内容。这些能完成绚丽多彩的显示效果，也构成组件多彩的基础。首先Ext元素扩展CSS、Dom等方面的操作方法。提供了更为强大方便的使用方法。对于Dom的操作包括如何对于元素元素实现创建、插入、删除、复制等方法的操作。对于CSS，它扩展相对、绝对等方面的元素定位操作。还提供了如可视、移动、Scroll等方面对于样式上的操作。第二在Dom树中查找需要的元素也是元素扩展中要解决的问题。通过document.getElementById或element.getElementsByTagName是可以找根据名字或id来找到所需的元素，但是这样不能满足于要求。为了对于元素的查找能如Css Selector一样方便，Ext也提供了CSS Selector的实现，用来查找Dom元素。第三拖曳是原生Dom元素所没有功能，它是事件与元素的结合体。通过拖曳，使得web应用系统能如桌面软件一样有点强大的易用性同进美妙其伦。很多功能的完成能通过简单的拖曳来实现。第四动画是javascript中最吸引人的地方。通过Ext的动画特效函数，我们通过只要一行简单的调用就可以实现动态十足的效果。同时动画特效也内致到元素的创建、销毁等可视方面的操作函数中，只要通过一个简单的参数配置就可以实现元素的动画特效。第五为了实现Ext元素数组特性（如同jquery对象一样），它还在Ext元素的基础上构建一个复合元素。专门用来对一组元素进行统一的同类的操作。Ext元素采用了flyWeight模式来提供性能同时还采用垃圾回收机制处理元素的内存泄露问题。这一部分内容将在第7，8，9，10、11、12、13章行详细地分析。UI组件Ext的UI组件是一个很奇妙的东西，它的实质就是一个HTML标签所表现的区域，然而它使静态标签变成动态的有生命的周期，每个组件都有着其自身的特性和生命周期。同时每个组件都有着良好的扩展性和易用性。Ext组件并不是一个个分散的结构，它的采用继承方式紧密关联的的倒树结构。它把组件的共性的东西抽象出来为父类，这个类实现了创建渲染销毁的生命周期。同时其基础上又提供了另外的抽象类来实现UI组件的形状及可视化操作。这就是UI组件的组件模型。在基于这种UI形式的设计中，所有UI共性是其都有着着，把这个生命周期的操作抽象成组件类（Component类）。每个继承它的组件都有着自己的生命周期。在设计组件类时，尽量地通用，给每个组件生命周期中都扩展私有的功能的能力。UI的最终目标还是显示出来，达到可视的效果，但是有的组件从渲染之后其形状就不会发生变化（如大小，位置等），于是把这个有形的或者说需要进行可视渲染的功能抽象到另外一个类中（BoxComponent类），它继承于组件类，同时它做为所有需要进行可视渲染的组件的基类。组件模型中的BoxComponent类并不能处理其中间排放多个其它的组件。而且这是一个经常用到功能，于是Ext给出了容器模型，把容器的功能抽象到Container类，这个类继承于BoxComponen，其内部可以包括其它的组件，这些其它的组件可以是任何的组件。包含在容器的组件不是无序地排放着，而是要按着一定的布局来摆放。这就有容器布局的概念。Container类是所有容器的基类，在container基类的基础，它提供一个使用频率最高的组件panel类。Panel可以翻译成平板，面板，也就是排放东西的一个平面。Panel是容器最重要的应用，它为组件的排放布局提供了统一的方法或属性。在Ext中的组件继承树中ComponentBoxComponenContainerPanel是Ext的组件的主干，也是其支柱。它融合了组件模型和容器模型两大模型的应用。这四个类的继承链方式构建了Ext组件的骨架。在这一主干的旁还有许多其它的组件或继承方式等。这一部分内容在第14，15，16，17，18，19，20章进行详细地介绍。深入剖析ExtJS 2.2实现及应用连载(4):如何学习ExtJS 1.4如何学习ExtJS如何学习Ext，是所以刚接触它的读者都会问到的问题？学习Ext最好的办法就是独立去实现一个应用系统，这个demo系统的相关的功能可以对着Ext包中自带的例子进行改进，在实现系统的过程肯定会碰到这样那样的问题，可以通过从相关论坛中询问来解决或尝试分析Ext的源码来进行剖析其问题所在。在开发之前，我们得先知道从那里下载Ext,如何搭建快速开发环境和那些较好的论坛。下面就这几个方面进行讲解。获取源码并部署首先我们得获到Ext的源码或相关的文件。我们可以通过/products/extjs/download.php到其官方网站下载最新的版本。目前是2.2版本，如图： 图1.2 Ext的下载页面我们只要点击ExtJs2.2 SDK后面的download就可以下载所需要的Ext类库。它包括源码，实例，文档等。下载完成之后，为了能运行其文档或例子，我们要把其解压部署在容器中，如IIS，tomcat中。只要把其根目录文件夹直接拷到对应的容器就可以。接下就可以通过http:/localhost:8080/ext-2.2/docs/index.html这样的方式访问到其文档，或通过http:/localhost:8080/ext-2.2/examples/samples.html来访问其实例，如图： 图1.3 extjs自带实例演示我们可以通过其实例的演示再分析其实现过程。Eclipse及spket的开发环境的搭建欲善其事 先利其器，在使用和开发Ext之前，我们也要找到一个好的工具。Ext有众多的类和方法，基本上是记忆不住每一个的拼写。我们得找到相关的提示的工具。但是提示JS是一件很难的事情。apanata可以说是做得比较好，但是对于Ext的提示不倒位。spket是开发Ext的利器。不但能支持点串形式的提示，而且还能支持链式的代码查看。这对于学习Ext有得极大的帮助。Spket可以免费使用，它以Eclipse插件的形式提供。我们可以在eclipse中强大的功能少集成spket。这样开发其它代码或js都可以在同一个工具。在eclipse中安装spket很简单：其步骤如下： 1、在eclipse菜单中选择Help - Software Updates - Find and Install.- Search for new features to install -New remote site.。这时会弹出一个窗口，如下图，在Name:中输入 Spket, 在Url:中输入 /update/。点击ok按钮。之后按提示一步步进行相关的操作，下载完毕重启 Eclipse。图1.4 eclipse中安装spket插件2、在eclipse菜单中选择Window - Preferences - Spket - JavaScript Profiles - New ；弹出窗口，输入名字：“ExtJS”点击OK。这时ExtJS会出现在主窗口中，选择“ExtJS” 并点击“Add Library”弹出一个小窗口，在该小窗口中下拉条中选取“ExtJS”，为ExtJS指明其属于那一种类型。接下来在主窗口中选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件； 3、设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右边的“Defalut”按钮； 4、JS打开方式为 Window - Preferences -General- Editors- File.选择JS 为 Spket JavaScript Editor(default)。 现在我们就可以在Ext中使用spket。看一下其功能。只要把鼠标放在相对的方法中，它会弹出其使用说明。在编写代码中，它会自动提示，这样就给我们开发学习提供了很大的方便。而且当按在ctrl+鼠标点击就会跳转到该方法的源码处。如下图所示图1.5 代码提示学习的论坛在学习和使用Ext，肯定会碰到各种各样的问题。这些问题有的时候自定不能解决，就得求助于他人。Ext的广泛的应用，在网络上有很多相关技术讨论的论坛。就一些常用论坛做一些介绍。u Ext官方论坛 Ext官方论坛可以说是最权威的讨论Ext技术的论坛。它是Ext和用户交流的窗口。不但提供众多的Ext的扩展组件。还提供了Ext新的功能需求，求助等众多版块。问题基本能从这边得到解决。其网址：/forum/。u JavaEye论坛JavaEye与Ext不同，它是中文论坛。它的Ajax的模块基本上成为中国Ext高手讨论Ext技术的专版。在这里你能很快得到相关的Ext的技术帮助和学习的资料。其网址：/forums。u dojo中国dojo中国本来是为了dojo进行中文化的Ajax的网站。而现在却成了Ext相关的知识的讲解的网站，从名字上来看讲Ext不伦不类，但是其中的一些文章及视频教程对于初学者还是有很大的帮助。其网址：/。深入剖析ExtJS 2.2实现及应用连载(5):ExtJS文件结构 1.5 ExtJS文件结构当我们下载Ext之后，解压了其文件。对着众多的文件无从下手。这一节就对其目录下所有的文件进行简单地说明。在让读者在使用过程更好了解Ext。下面就Ext2.2的文件夹中的文件进行说明。文件或子文件夹说明Adapteradapter文件夹是为Ext提供了适配器。Ext提供了四种适配器：ext、jquery、prototype、yui。Ext的使用是建立在适配器的基础上。也就是在使用Ext之前要先调用适配器。通过这些适配器，可以在Ext中使用jquery,prototype，yui等框架的功能。AirAir是在Ext2.02新增加的功能。它针对Adobe Integrated Runtime (AIR)1.0中应用程序的沙箱提供运行的支持。Ext的air使用Js能轻松实现访问并实现本地的功能，如系统拖盘等。Buildbuild是source编译压缩过的文件。其文件夹内部的结构和source文件相同。并且文件是一一对应的，其规则是在源码的文件后面加上了-min的后缀。如源文件夹Action.js对应Build文件夹中的Action-min.js。这为我们单独引用其源码中的文件提供了方便。Docsdocs文件夹中是Ext的使用文档。Ext中类的方法、属性的使用说明都可以在该文档中找到。该文档其实是采用Ext构建的一个独立的文档系统。在其OutPut的文件夹中的每个html文件都对应着一个类的说明。我们可以把其抽出形成chm文档。使用更方便。Examplesexamples文件夹是分门别类地为每个类提供其实例演示。通过这些实例，用户能很快使用Ext来进行。不过其实例要部署才能使用。这些实例涉及到日常系统开发中的方方面面的应用，这些例子来了解和学习Ext的最好的资料。Resourcesresources文件夹包括了Ext的所有CSS样式和其图片的资源。在其CSS子文件夹中是其所有样式文件。这些样式文件在其名相关的类中应用。其下的images文件夹提供了三组图片分别默认风格、grey、vista风格的图片。Source该文件夹中包括Ext所有源文件。其子文件夹说明如下：adapter提供自身的适配器实现。core是指Ext的核心、低层实现的部分，如元素、Template、事件。data是用来处理Ext的数据部分。dd:是进行拖曳的实现。locale是本地化的语言的实现。state实现了Ext的状态管理。util则是Ext的实用工具箱。 widgets中包括了Ext的所有组件。如grid,menu,tree等。CHANGES.htmlINCLUDE_ORDER.txtlicense.txtCHANGES.html给出当前版本从最近的上一版本的改进。license.txt则是指定Ext的版权及免费和商业之间的使用范围。INCLUDE_ORDER.txt指明引用Ext的源文件的顺序。ext-all-debug.jsext-all.jsext-core-debug.jsext-core.jsext-all-debug.js、ext-core-debug.js是在开发中引用Ext的core或all的文件。它主是就是为了开发时进行方便调试而用的。在发布时就可以采用ext-core.js、ext-core.js。如果想在开发只用到基本功能，引用ext-core-xx.js文件。否则就应该用到all文件。在引用它们之前，还要引用适配器。 表1-1 文件夹中文件介绍这些文件夹中的文件，特别是source中文件，我们会在后面的章节进行详细地分析。在这里给出一个说明，让读者对Ext包中的文件有一个大概的了解。1.6其它框架介绍在进行web开发时，还有一些其它的JS框架也可以为我们的开发提供其大的效率。下面就这些框架做一个简单的介绍，读者可以根据自己的需求在项目中选择所需要的框架。1、Prototypeprototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。script.aculo.us是一个易于使用，支持多种浏览器，用于增强Prototype的JavaScript框架。script.aculo.us包含：动画框架（animation framework），拖放（drag and drop）， Ajax控件，DOM工具，单元测试等。其网址：/及http:/script.aculo.us/。2、jqueryjQuery是一个快速、简洁的JavaScript框架，帮助你简化查询DOM对象，处理事件，制作动画，和处理Ajax交互过程。利用jQuery将改变你编写JavaScript代码的方式。原先用20行代码完成的功能，jQuery用10行就可以轻松搞定。如要仔细分析jquery的源码，可以参见笔者的网络版的jquery1.2.6源码分析。jquery的官方网站：/。3、MooToolsMooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。 Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等等。其网址：/。4、YUIYahoo! User Interface (YUI) Library是一组采用DOM scripting，DHTML和Ajax等技术开发的Web UI控件和工具。它提供了众多的控件，如Container（包括：Module、Overlay、Panel、Tooltip、Dialog、SimpleDialog）、Menu、TreeView、DataTable、Button等。Ext的前身就是YUI，在现版的Ext中还能找到众多YUI的影子。它的文档也非常丰富。如果想单独采用某个或某些组件，使用YUI是一个不错的选择。其网址：/yui/。5、DojoDojo是一个强大的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供Ajax，events，packaging，CSS-based querying，animations，JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。尽管dojo有着大公司的支持，有着，离线应用，跨浏览器矢量绘图这些它独有的实现，但是由于其0.3的版本有着其大问题，推翻重写之后的0.9、1.0及之后的版本可能在性能上都着有极大的提高。但是使用者不多。对于分析其源码实现，还是有着很多借鉴的地方，其网址：/。6、Qooxdooqooxdoo和Ext一样，是一个用于开发Ajax应用程序的GUI框架。不需要HTML,CSS,DOM知识，采用面向对象的JavaScript API就能够开发出类似于Window桌面风格的Web应用程序。与Ext相比，它更多地是采用了面向对象的编程方法来进行架构和重现JavaScript的语言。其网址：/。7、FlexFlex并不是一个Ajax的框架，它是支持RIA开发和部署一系列发展中的技术和产品线的概括词。它使用基于XML的MXML语言进行GUI界面开发。在展现方面，它提供了众多的组件及特效的实现。在开发方面，它提供了基于Eclipse的IDE：Flex Builder 2，集成了编译器，代码缩进，调试，设计视图，源代码控制等功能。在后台方面，它提供自动测试，企业通信，数据服务的 Flex Enterprise Services 2。1.7 小结本章从Ext的背景讲起，分析了Ext出现的环境，给出如何学习Ext以及为什么要学习或使用Ext。还从Ext的体系结构和其文件包是文件进行了分析，从即从其功能上做出总体概述，同时还讲解了文件包的文件的作用。最后给了同类的框架的说明，让读者能根据自己的开发选择合适的应用。在下一章，我们将通过一个实例要讲解Ext串通本章所讲的功能及内容。深入剖析ExtJS 2.2实现及应用连载(6):ExtJS实例概述 第2章ExtJS入门实例本章通过一个简单实例展现ExtJS的应用。通过这个实例，读者可以快速了解并使用Ext。本实例麻雀虽小，五脏既全。它涉及到ExtJS的大部分功能，能向读者展现ExtJS开发的方便及其或功能的强大。通过本实例，读者能快速进入ExtJSs的开发领域。本章主要内容：u ExtJS Panel的使用u ExtJS事件的使用u ExtJS的Tree的使用u ExtJS的Layout的