下载文档原格式
Ext框架基础及核心简介ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web 应用程序界面。
ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个与后台技术无关的前端ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
获得ExtJS要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址/download，进入下载页面可以看到大致如下所示的界面，可以选择选择1.1或2.0版本。
应用ExtJS应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext- all.js是extjs的核心库。
adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js 换成adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype- adapter.js等核心简介ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。
ExtJS的类库由以下几部分组成：底层API(core)：底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。
其它控件都是建立在这些底层api的基础上，底层api位于源代码目录的core子目录中，包括DomHelper.js、Element.js等文件，如图xx所示。
控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。
序言ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。
ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造，使得整个系统在用户体验上有了非常大的变化。
本教程记录了前段时间本人学习ExtJS的一些心得及小结，希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。
教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。
本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。
在学习了本教程后，可以下载这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。
本教程比较适合ExtJS的新手作为入门教程及手册使用，并在我的博客/blog/lengyu/上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS实用开发指南》，包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。
该《指南》当前在作为VIP文档发布，供该站的VIP用户阅读及下载。
凡是购买了《ExtJS 实用开发指南》文档的VIP用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。
最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们一起共同学习、共同进步，下面让我们一起进入精彩的ExtJS世界吧。
序言ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。
ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造，使得整个系统在用户体验上有了非常大的变化。
本教程记录了前段时间本人学习ExtJS的一些心得及小结，希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。
教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。
本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。
在学习了本教程后，可以下载这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。
本教程比较适合ExtJS的新手作为入门教程及手册使用，并在我的博客/blog/lengyu/上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS实用开发指南》，包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。
该《指南》当前在作为VIP文档发布，供该站的VIP用户阅读及下载。
凡是购买了《ExtJS 实用开发指南》文档的VIP用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。
最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们一起共同学习、共同进步，下面让我们一起进入精彩的ExtJS世界吧。
ExtJS 实用简明教程[收集整理:龚辟愚、QQ 群：19274175]序言ExtJS 是一个很不错的 Ajax 框架， 可以用来开发带有华丽外观的富客户端应用， 使得我 们的 b/s 应用更加具有活力及生命力。
ExtJS 是一个用 javascript 编写，与后台技术无关的前 端 ajax 框架。
因此，可以把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。
最近我们在几个应用都使用到了 ExtJS， 对公司以前开发的一个 OA 系统也正在使用 ExtJS2.0 进行改造， 使得整个系统在用户体验上有了非常大的变化。
本教程记录了前段时间本人学习 ExtJS 的一些心得及小结， 希望能帮助正在学习或准备学习 ExtJS 的朋友们快速走进 ExtJS2.0 的精彩世界。
教程包括 ExtJS 的新手入门、组件体系结构及使用、ExtJS 中各控件的使用方法及示例 应用等，是一个非常适合新手的 ExtJS 入门教程。
本教程主要是针对 ExtJS2.0 进行介绍，全 部代码、截图等都是基于 ExtJS2.0。
在学习了本教程后， 可以下载 这个基于 ExtJS2.0 开发的单用户 Blog 系统 的源代码，这个系统是我们团队中的 williamraym 与大峡等人开发的一个演示系统，系统源 码整体质量比较高，通过学习这套源代码相邻一定能提高您 ExtJS 的综合水平。
本 教 程 比 较 适 合 ExtJS 的 新 手 作 为 入 门 教 程 及 手 册 使 用 ， 并 在 我 的 博 客 /blog/lengyu/上进行发布； 应一些朋友的要求， 根据本教程的写作思路， 我还编写了比本教程更为详细的《ExtJS 实用开发指南》 ，包含详细的 ExtJS 框架使用方法、 各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系 统介绍等内容，适合想深入学习 ExtJS 或正在使用 ExtJS 进行开发朋友们使用。
ExtJS框架培训●1、ExtJS 简介●2、ExtJS 基础组件●3、ExtJS组件之Panel●4、ExtJS 4.0布局●5、ExtJS与后台交互ExtJS简介●什么是ExtJS？•ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建用户界面，且与后台技术无关的前端Ajax框架。
ExtJS 简介●ExtJS显示效果示例1ExtJS简介●ExtJS显示效果示例2ExtJS简介●认识ExtJS的开发包要开始ExtJS之旅的第一步是要获得开发包，可以从官方网站/下载。
下载地址是/products/extjs/downloa dExtJS简介●ExtJS4.0开发包的文件目录结构ExtJS简介●以下为其主要资源的简单介绍•builds：ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快。
•docs：ExtJS的文档，其中最重要的是ExtJS的API。
•examples：官方的演示示例，通过对这些演示示例的熟悉，就能很快掌握ExtJS开发。
•locale：多国语言的资源文件，其中ext-lang-zh_CN.js是简体中文。
•pkgs：ExtJS各部分功能的打包文件。
•resources：ExtJS要用到的图片文件和样式表文件。
•src：目录是未压缩的源代码目录。
•bootstrap.js：Extjs库的引导文件，通过参数可以自动切换ext_all.js和ext_all_debug.js。
•ext_all.js：ExtJS的核心库，是必须要引入的。
•ext_all_debug.js：ext_all.js的调试版。
ExtJS简介●ExtJS API文档ExtJS简介●从Hello World开始•<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">•<html>•<head>•<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">•<title>Insert title here</title>•<link rel='stylesheet' type='text/css' href='./ext/resources/css/ext-all.css'>•<script type="text/javascript" src="./ext/bootstrap.js"></script>•<script type="text/javascript">•Ext.onReady(function(){Ext.MessageBox.alert('helloWorld',"I'm coming");•});•</script>•</head>•<body>•</body>•</html>ExtJS简介●HelloWorld运行效果如下图:ExtJS简介●ExtJS拦路虎•问题1：导入js文件后，在js文件中定义的中文显示在页面后出现乱码。
ext目录Ext简介Ext是一个强大的js类库，以前是基于YAHOO-UI,现在已经完全独立了,主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid 了,编程思想是基于面向对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了.主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口),在引用ext类库的时候.这三个文件必不可少.它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧！其核心的组件基本覆盖了我们构建富客户端的常用的组件。
从 Ext 2开始，商业版(针对那些以盈利为目的的开发方)要收费了。
这可能会影响一些他的应用前景。
目前的最新版本为4.0Ext动画功能介绍一下Ext预置的11个动画功能。
1.slideIn/slideOut：元素的滑进或滑出效果。
默认slideIn是从顶部滑进的，而slideOut 是从底部滑出的，可通过修改第1个参数设置滑进或滑出位置。
其使用方法请看下面代码。
var el = Ext.get('elId');el.slideIn(); //从顶部滑进el.slideOut(); //从底部滑出el.slideIn('l',{ easing: 'easeOut', duration: .5 }); //从左边滑进2.puff：元素慢慢向四周扩大并逐渐消失。
当效果完成后，元素将隐藏（visibility属性为hidden），不过元素原来所占位置将继续存在。
如果需要删除元素，请设置remove属性为true。
其使用方法请看下面代码。
var el = Ext.get('elId'); //默认方式el.puff();//自定义方式，元素消失后删除元素el.puff({ easing: 'easeOut', duration: .5, remove: true, useDisplay: false })3.switchOff：元素闪烁一下，然后往中心折叠（类似关掉电视）。
ExtJS快速入门指南一、ExtJS框架简介 (1)二、如何使用Ext (2)三、Ext组件 (3)1、组件简介 (3)2、组件XType (4)3、组件应用 (4)4、组件配置选项 (5)5、组件属性 (6)6、组件方法 (6)四、事件及事件响应 (7)五、Component及Container简介 (10)1、ponent (10)2、tainer (10)六、面板Ext.Panel (11)面板Panel简介 (11)面板内容 (12)面板与DOM节点DIV (13)七、ViewPort (14)八、窗口Window (17)九、对话框 (18)十、TabPanel (22)十一、布局 (26)十二、表格Grid (29)十三、TreePanel (30)十四、表单Form (32)十五、理解Html DOM、Ext Element及Component (34)十六、Ext类中的get方法简介 (35)十七、如何学习及掌握Ext (37)一、ExtJS框架简介ExtJS也就是Ext框架，官方网址为，ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。
ExtJS可以用来开发RIA(Rich Internet Application，富互联网应用系统)的开源AJAX应用框架，使用的开源协议是GPL。
ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端Ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJs最开始基于UI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
二、如何使用Ext首先从ext官方网站下载ext的sdk，把sdk拷到web应用程序目录，然后即可在web 页面中直接通过<script>标签引入ext的库文件，就可以使用javascript调用ext的各种控件。
ExtJS框架培训●1、ExtJS 简介●2、ExtJS 基础组件●3、ExtJS组件之Panel●4、ExtJS 4.0布局●5、ExtJS与后台交互ExtJS简介●什么是ExtJS？•ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建用户界面，且与后台技术无关的前端Ajax框架。
ExtJS 简介●ExtJS显示效果示例1ExtJS简介●ExtJS显示效果示例2ExtJS简介●认识ExtJS的开发包要开始ExtJS之旅的第一步是要获得开发包，可以从官方网站/下载。
下载地址是/products/extjs/downloa dExtJS简介●ExtJS4.0开发包的文件目录结构ExtJS简介●以下为其主要资源的简单介绍•builds：ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快。
•docs：ExtJS的文档，其中最重要的是ExtJS的API。
•examples：官方的演示示例，通过对这些演示示例的熟悉，就能很快掌握ExtJS开发。
•locale：多国语言的资源文件，其中ext-lang-zh_CN.js是简体中文。
•pkgs：ExtJS各部分功能的打包文件。
•resources：ExtJS要用到的图片文件和样式表文件。
•src：目录是未压缩的源代码目录。
•bootstrap.js：Extjs库的引导文件，通过参数可以自动切换ext_all.js和ext_all_debug.js。
•ext_all.js：ExtJS的核心库，是必须要引入的。
•ext_all_debug.js：ext_all.js的调试版。
ExtJS简介●ExtJS API文档ExtJS简介●从Hello World开始•<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">•<html>•<head>•<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">•<title>Insert title here</title>•<link rel='stylesheet' type='text/css' href='./ext/resources/css/ext-all.css'>•<script type="text/javascript" src="./ext/bootstrap.js"></script>•<script type="text/javascript">•Ext.onReady(function(){Ext.MessageBox.alert('helloWorld',"I'm coming");•});•</script>•</head>•<body>•</body>•</html>ExtJS简介●HelloWorld运行效果如下图:ExtJS简介●ExtJS拦路虎•问题1：导入js文件后，在js文件中定义的中文显示在页面后出现乱码。
Ext-JS概述（工作原理）什么是ExtJSExtJS（简称Ext）是以HTML作为控件的骨干、CSS作为样式的表现、以JavaScript 作为编程语言，可应用于IE/FireFox/Opera等的各种浏览器上的AJAX UI组件库。
Ext美观大方，实例完整，完全可以靠这些丰富例子，就地取材很快的建立起一个像样的程序来。
示例--使用AJAX技术在网格中显示服务器端记录数组数据。
检查Ext内核是否添加并可用。
静态页面：<html><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"><title>Grid Filter Example</title><link rel="stylesheet" type="text/css"href="../../resources/css/ext-all.css" /><script type="text/javascript" src="../../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="grid-filter.js"></script></head><body><h1>Grid Filter Example</h1><div id="grid-example" style="margin: 10px;"></div></body></html>说明：Ext的内核文件有如下几个：ext-all.css与显示有关的JavaScript文件grid-filter.js，实现显示与界面的分离。
extjs 目录 序言 Ext发展史 什么是EXT ExtJs UI Engine简介 Ajax主流框架与ExtJS Ext学习及应用经验小结
编辑本段
序言 ExtJS是一种主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。 功能丰富，无人能出其右。 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。 自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。 再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。 呵呵~不过ext也不是万能的，ext没有默认的统计功能，也不支持excel，pdf等导出数据。
编辑本段
Ext发展史 1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展，但后来一度风头盖过其父辈YUI，足以说明 大家对它的热情，很多人把它投入项目人并不十分了解它。分析人士打了一比喻：就好比尚未谋面， 并不了解一个人的家庭、教育、品行等背景，只因为他有一副精致漂亮的外观，就对其陷入了疯狂的倾慕之中。因此分析人士建议，在投入项目前，要认真仔细地了 解EXT的内在原理和与其他Ajax库不同地方。 2、在2006年初 ，Jack Slocum(杰克斯·洛克姆 ) 就一套公用设施扩建为Yahoo! User Interface (YUI) 库而工作。这些扩展很快组织成一个独立的库代码并以“yul-ext"的名义下发布。 3、在2006年秋天,Jack发行了版本为0.33的yui-ext,而最终被证明为最后版本的代码，根据这名字（下开放源代码DSB许可）。在年底之前，这个库已大受欢迎, 名字被简化为Ext，反映了它作为一个框架的成熟和独立。 该公司成立于2007年初，Ext现在为双执照，使用LGPL和一个商业执照。 4、在2007年4月1日，发布1.0正式版。 5、官方在2009年4月14-16日的首次Ext Conference中发布了Ext的3.0 RC版本。 6、2009年5月4日，Ext的3.0 版本发布。 7、2010年1月8日，ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户，现在的版本为Ext-3.2.0 8、2010年6月15日，当开发者访问著名的JavaScript库ExtJS网站，会发现自己被重导向到另一个不熟悉的网址和界面sencha。原来，，ExtJS项目已经与触摸屏代码库项目jQTouch和SVG处理库Raphael合并，后两个项目的创始人David Kaneda和Dmitry Baranovskiy也将加入ExtJS。此举是ExtJS为了应对HTML5等新趋势，加强丰富图形和触摸屏功能的重要举措。
编辑本段
什么是EXT 1、ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。 2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。
编辑本段
ExtJs UI Engine简介 ExtJs初期仅是对Yahoo! UI的对话框扩展，后来逐渐有了自己的特色，深受网友的喜爱。 发展至今， Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。该框架完全基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用！ ExtJs支持多平台下的主流浏览器 Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+、Opera9+。在使用的厂家包括IBM、Adobe、Cisco和更多。ExtJs官方网站www.extjs.com
编辑本段
Ajax主流框架与ExtJS JQuery、 Prototype和YUI都属于非常核心的JS库。虽然YUI，还有最近的JQuery，都给自己构建了一系列的UI器件（Widget），不过却没有一个真正的整合好的和完整的程序开发平台。哪怕是这些低层的核心库已经非常不错了，但当投入到真正的开发环境中，依然需要开发者做大量的工作去完善很多缺失之处。而Ext就是要填补这些缺口。主流开源框架中只有Dojo像Ext一样，尝试着提供整合的开发平台。相比Dojo这个出色的工具包，我们认为 Ext能提供一个粘合度更高的应用程序框架。Ext的各个组件在设计之时就要求和其它Ext组件组合一起工作是无缝合作的。这种流畅的互通性，离不开一个紧密合作的团队，还必须时刻强调设计和开发这两方面目标上的统一，而这点是很多开源项目未能做到的。从构建每一个组件开始，我们始终都强调组件的外观、性能、互通性和可扩展性，而我们认为组件已经达到了这几点的要求。 Ext绝对可以单独使用。实际上，除了有特定的要求，推荐单独使用Ext，这样的话文件占位更小，支持和整合也更紧密。我们也支持与jQuery、 YUI或Prototype整合使用，作为低层库的角色出现，以提供处理各种核心的服务，如DOM和事件处理，Ajax连接和动画特效。使用整合方式的一个原因是它们已具备了一些特定的器件而Ext并没有原生支持——像YUI的History控件便是一个典型的例子。这时，Ext需要依赖YUI这个库的底层来实现History控件，这样一来的话也可免去Ext自身底层库，从而减少了整个程序的内存占用。另一个使用整合方式的原因是，对于许多已在使用其他底层库的程序，你可能希望逐步加入Ext。总之，如果已经有了其他库，Ext可已利用它们。我们的宗旨是为用户提供各种可能性和性能上的优化。而事实是，只要实现了相对应的底层库接口，为任意一个框架添加上适配器是没有问题的——人们可以轻松地将Dojo、Moo、Ajax.NET，或其它JS库转变为 Ext的底层。 Ext从2.x开始收费，这给他的应用前景带来一些问题。不过对国内开发人员的影响不大，毕竟是客户付款。
编辑本段
Ext学习及应用经验小结 一、理解Html DOM、Ext Element及Component 要学习及应用好Ext框架，需要理解Html DOM、Ext Element及Component三者的区别。 Ext是基于Web的富客户端框架，其完全是基于标准W3C技术构建设的，使用到的都是HTML、CSS、DIV等相关技术。Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。 无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为HTML在浏览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。 仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。 对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。 在使用Ext开发的应用程序中，组件Component是最高层次的抽象，是直接给用户使用的，Ext Element是Ext的底层API，主要是由Ext或自定义组件调用的，而DOM是W3C标准定义的原始API，Ext的Element通过操作DOM 来实现页面的效果显示。 在Ext中，组件渲染以后可以通过访问组件的el属性来得到组件对应的Element，通过访问Element的dom属性可以得到其下面的DOM对象。另外，我们可以通过通过Ext类的快捷方法getCmp、get、getDom等方法来得组件Component、Ext元素Element及DOM节点。比如： var view=new Ext.Viewport();//创建了一个组件Component view.el.setOpacity(.5);//调用Element的setOpacity方法 view.el.dom.innerHTML="Hello Ext";//通过Element的dom属性操作DOM对象 再看下面的代码： var win=new Ext.Window({id:"win1",title:"我的窗口",width:200,height:200}); win.show(); var c=Ext.getCmp("win1");//得到组件win var e=Ext.get("win1");//根据id得到组件win相应的Element var dom=Ext.getDom("win1");//得到id为win1的DOM节点 二、熟悉ext组件体系 Ext2.0对整个框架进行了重构，最为杰出的是推出了一个以Component类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。 在《ExtJS实用开发指南》中，有如下面一幅组件图： 通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系，当使用一个组件的时间，了解他的继承体系，这样可以便于我们掌握组件的各种特性。 三、掌握核心控件 控件其实也是组件，比如用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel，还有代表应用程序窗口的Ext.Window等都属于Ext控件。在使用Ext的时候，一定要掌握一些核心控件，特别是处于基类的控件。比如上面提到的几个控件，他们都是继承于面板Panel，所以我们要重点掌握面板这个核心控件的特性。比如面板由以下几个部分组成：一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。只要掌握了Panel的应用，那么学习TreePanel、Window等就会变得简单得多。
