extjs实用开发指南
ExtJs4.0入门教程
ExtJS简介
ExtJS显示效果示例1
ExtJS简介
ExtJS显示效果示例2
ExtJS简介
认识ExtJS的开发包
要开始ExtJS之旅的第一步是要获得开发包，可以 从官方网站/下载。下载 地址是 /products/extjs/downloa d
•
ExtJS组件之Panel
•
控件
控件(widgets)：控件是指可以直接在页面中创建 的可视化组件，比如面板、选项板、表格、树、 窗口、菜单、工具栏、按钮等等，在我们的应用 程序中可以直接通过应用这些控件来实现友好、 交互性强的应用程序的UI。
ExtJS基础组件
•
组件分类举例
容器组件：如toolbar、pagingtoolbar、panel、 form、menu、treePanel、gridPanel、window等。 工具栏及菜单栏组件：如tbseparator（工具栏分 隔符）、menuitem（菜单项）等。 表单及元素组件：如checkboxfield（复选框）、 combo(下拉列表)、datefield（日期选择项）等。 其他组件（包括图表、视图、编辑、按钮组件）： 如chart、button。
• • • • •
• •
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的简单使用手册
• Ext.clearOpacity() 清楚透明度设置
– Ext.fly(‘test1’).clearOpacity();
DOM的游历
• • • • • • • • • • • • • Ext.is() 传入参数与当前是否一致
– Ext.fly(‘test1’).is(‘div.abc’)。
Ext.findParent() 从当前节点为起点，查找外围节点，并返回该节点。 Ext.findParentNode() 从当前节点的父节点为起点，查找外围节点，并返回该节点。 Ext.up() 从当前节点开始，向上寻找“父父”节点
• E[f*=test]表示搜索所有拥有f的属性并且属性值包含test的E元素
– Ext.select(‘tr[ref*=Myfield/货物清单]’)；
• E[f%=2]表示搜索所有拥有f的属性并且属性值能被2整除的E元素
– Ext.select(‘tr[ref%=2]’)；
• E[f!=test]表示搜索所有拥有f的属性并且属性值不为test的E元素
– Ext.select(‘div:not(div.test)’);//摒除样式类为test的所有div元素集合
• E:has(S) E元素集合为包含与S匹配的所有元素的集合 • E:next(S) 下一个侧边元素与S匹配相符合的元素 • E:prev(S) 上一个侧边元素与S匹配相符合的元素
ext 教程
序言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实用开发指南
序言ExtJS 是一个很不错的Ajax 框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s 应用更加具有活力及生命力。
ExtJS 是一个用javascript 编写，与后台技术无关的前端ajax 框架。
因此，可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。
最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA 系统也正在使用ExtJS2.0 进行改造，使得整个系统在用户体验上有了非常大的变化。
本教程记录了前段时间本人学习ExtJS 的一些心得及小结，希望能帮助正在学习或准备学习ExtJS 的朋友们快速走进ExtJS2.0 的精彩世界。
教程包括ExtJS 的新手入门、组件体系结构及使用、ExtJS 中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS 入门教程。
本教程主要是针对ExtJ 进行介绍，全部代码、截图等都是基于ExtJS2.0。
在学习了本教程后，可以下载 这个基于ExtJ 开发的单用户Blog 系统的源代码，这个系统是我们团队中的williamraym 与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS 的综合水平。
本教程比较适合ExtJS 的新手作为入门教程及手册使用，并在我的博客/blog/lengyu/上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS 实用开发指南》，包含详细的ExtJS 框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS 或正在使用ExtJS 进行开发朋友们使用。
该《指南》当前在 作为VIP 文档发布，供该站的VIP 用户阅读及下载。
凡是购买了《ExtJS 实用开发指南》文档的VIP 用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。
ext开发手册
ext开发手册一、简介EXT是一个针对构建富应用程序的JavaScript框架，它拥有丰富的组件库和强大的功能。
本手册将为开发人员提供完整的EXT开发指南，包括基础知识、常用组件和开发技巧等内容。
二、基础知识1. 安装和配置EXT：首先，下载EXT框架的压缩包并解压到项目的根目录。
然后，在HTML页面中引入EXT的必要文件，包括CSS和JavaScript。
最后，在需要使用EXT的页面中初始化EXT环境。
2. EXT的核心概念：理解EXT的基本概念对于开发者来说至关重要。
常见的核心概念包括组件、容器、布局和事件等。
组件是EXT的基本构建块，它可以是按钮、表单、树等等。
容器负责管理和布局组件，而布局则定义了组件的排列方式。
事件是EXT中的重要特性，可以用于处理用户交互和系统响应。
三、常用组件1. 表单组件：EXT提供了各种强大的表单组件，如文本框、下拉列表、复选框等。
开发人员可以根据需求选择合适的组件，并根据组件的配置进行自定义设置。
例如，可以通过设置验证规则和错误提示来有效地验证用户输入。
2. 树组件：EXT的树组件是管理层次数据的理想选择。
开发人员可以通过构建树节点和设置节点属性来构建一个功能齐全的树结构。
树组件还支持展开、折叠、选择和拖放等交互操作，使得数据的展示与操作更加灵活。
3. 网格组件：EXT的网格组件是处理大量数据的最佳工具。
通过设置网格的列模型和数据模型，可以实现自定义的数据显示和排序。
网格组件还支持分页、过滤和编辑功能，为用户提供便利的数据处理方式。
四、开发技巧1. 使用样式：EXT提供了丰富的CSS样式，可以为组件添加不同的外观和交互效果。
开发人员可以通过应用样式类名称或自定义样式来实现个性化的外观效果。
同时，也可以使用主题文件来快速地改变整个应用程序的外观。
2. 数据绑定：EXT支持将数据与组件进行绑定，以实现动态数据的展示和交互。
通过设置数据模型和绑定关系，可以在数据更新时自动更新组件的显示内容。
EXT_JS实用开发指南
EXTJS实用开发指南1、要使用ExtJS 框架的页面中一般包括下面几句：<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script>Ext.BLANK_IMAGE_URL = '../../js/ext2/resources/images/default/tree/s.gif';在ExtJS 库文件及页面内容加载完后，ExtJS 会执行Ext.onReady 中指定的函数，因此可以用，一般情况下每一个用户的ExtJS 应用都是从Ext.onReady 开始的，使用ExtJS 应用，程序的代码大致如下：<script>function fn(){alert(“ExtJS库已加”);}Ext.onReady(fn);</script>2、A：fn 也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：<script>Ext.onReady(function (){alert(“ExtJS库已加载!”);});</script>B：进一步，我们可以在页面上显示一个窗口，代码如下：<script>Ext.onReady(function(){Varwin=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello,easyjfopen source</h1>'});//参数是"标题,宽度,高度,html文本"win.show();});</script>3、ExtJS 的类库由以下几部分组成：底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。
ExtJS 4 官方指南：类系统 简体中文版
Ext JS 4类系统在历史上第一次，Ext JS的经历了一个在基础上的巨大重构，这就是新的类系统。
新架构的基础几乎每一个都是建立在Ext JS4.x写单个类上，因此在开始编码之前理解这个类系统是很重要的。
本手册适用于任何希望创造新的或扩大在现有的Ext JS 4.x类的开发者。
它分为4个部分：∙第一节：“概述”解释为什么需要一个强大的类系统∙第二节：“命名约定”讨论命名类，方法，属性，变量和文件的最佳做法。
∙第三节：“实践”提供了详细的一步一步的代码示例∙第四节：“错误的处理和调试”提供有用的提示和技巧，如何处理异常1概述Ext JS4有300多个类。
我们有超过20万开发者的巨大社区，他们来自世界各地，有各种编程背景。
在这种规模的框架中，我们面对的一个巨大挑战就是提供一个共同的代码架构。
这个架构要求：∙熟悉和简单易学∙能快速开发，调试方便，无痛部署∙精心组织，可扩展性和可维护性JavaScript是一个没有类的，原型为导向（prototype-oriented）的语言。
因此，JavaScript语言本质上最强大的功能之一是灵活性。
它可以使用许多不同的编码风格和技巧，以许多不同的方式做同样的工作。
然而，该功能也是不可预知的成本。
如果没有一个统一的结构，JavaScript代码会真的很难理解，维护和再利用。
另一方面，基于类（Class-based）编程，仍然停留OOP的最流行的模式。
基于类的语言，通常需要强类型，提供封装，标准的编码约定。
通常使得开发者坚持一个大原则，编写的代码更可能是可预见的、可延伸和可扩展的。
然而，他们却不具有JavaScript这样的语言的动态能力。
每种方法都有其自身的利弊，我们能否对各方都去其糟粕，取其精华？答案是肯定的，我们已经在Ext JS 4的解决方案中实现了。
2命名约定使用一致的命名约定作为所有类的代码基础，而命名空间和文件名有助于保持你的代码的组织，结构化和可读性。
ExtJS4.2入门教程
ExtJS4.2入门教程话不多说，进入正题，至于有的人想了解ext的优势神马的，自己百度去吧！一、exit的配置。
（注意：本文讲解的是Ext js4.2.1，不同版本部署的js包名有微小差别）因为只是简单学习，方便新手入门，咱们只引入3个基本包。
ext-all.cssext-all.jsExt.Base.js怎么引入？二、示例。
1.helloworld，呵呵，学习程序嘛，咱们都是从helloworld开始的!效果：2.创建一个面板Ext.onReady(function(){//创建一个面板var myPanel = new Ext.Panel({renderTo:Ext.getBody(),title:'哈哈哈',width:300,height:300,html:'test面板'});});效果：3.创建一个tabpanelvar panel = new Ext.TabPanel({ renderTo:Ext.getBody(), width:300,height:200,activeTab:0,items:[new Ext.Panel({title:"面板1",html:'面板1内容！'}),new Ext.Panel({ title:"面板2",height:30,html:'面板2内容！'}),new Ext.Panel({ title:"面板3",height:30,html:'面板3内容！'})]});});效果：3.创建面板工具栏new Ext.Panel({ renderTo:Ext.getBody(), title:"GO,GO,GO,上去就是干！", width:300,html:'上去就是干！', tbar:[{text:'顶部工具栏'}],bbar:[{text:'底部工具栏'}],buttons:[{text:'工具栏位于footer' }] });});效果：4.创建左右布局的面板var panel = new Ext.Panel({ renderTo:Ext.getBody(), width:300,height:200, layout:"column",items:[{columnWidth:0.5,title:'面板1',html:'面板1的内容！',},{columnWidth:0.5,title:'面板2',html:'面板2的内容！',}]});});效果：5.创建表格布局Ext.onReady(function(){var data=[[1, 'EasyJWeb', 'EasyJF',''],[2, 'jfox', 'huihoo',''],[3, 'jdon', 'jdon',''],[4, 'springside', 'springside','']];var store=new Ext.data.SimpleStore({data: data,fields: ["id","name","organization","homepage"] });var grid =new Ext.grid.GridPanel({renderT o: Ext.getBody(),title:"中国Java社区",height:200,width:400,columns:[{header:"编号", dataIndex:"id"}, {header:"项目名称", dataIndex:"name"}, {header:"开发团队", dataIndex:"organization"}, {header:"网址", dataIndex:"homepage"}],store:store,autoExpandColumn: 2});});效果：。
Extjs教程_第一章_起步
第一章起步在这章里，我们将介绍ExtJS的基本功能。
如果你对web开发熟悉的话，您会惊诧于ExtJS框架的优雅！不同其他的JavaScript库，ExtJS为您的开发夯实了基础，只需几行代码，你就可以制作出丰富的用户界面。
本章包括：1. ExtJS的功能和您将会喜爱上它的原因；2. 如何获得Ext并在web应用中采用它；3. 采用”适配器(adapters)“使得Ext和其他的JavaScript库共存；4. 充分利用AJAX技术；5. 在您的语言中展示ExtJS对象；关于Ext：我们采用最新的的Ext 2.x版本，1.x版本到2.x版本的是一个重组的过程，包括添加新的组件、重命名组件用来重新组织结构等等。
这使得1.x和2.x兼容性很低。
3.x 版本则不然，他对2.x有很强的兼容性，可以很好的联合本书中所设计的内容。
Ext的开发组决定在日后的版本发布中都做到向前兼容。
Ext库是对雅虎YUI的一个拓展，提供了它所不支持的特性：良好的API，真实的控件。
虽然YUI致力于用户界面，但是它却没有提供许多有用的功能。
Ext的产生源自于开发者、开源贡献者们将YUI扩展成一个强大的客户端应用程序库的努力。
Ext提供了一个简单丰富的用户界面，如同桌面程序一般。
这使得开发者能够把精力更多的转移到实现应用的功能上。
Ext官网上的示例会让你知道它是如何的不可思议：/deploy/dev/examples/。
其中最引人注目的一个例子就是Feed Viewer，它展示了Ext.However提供的多种特性，对于学习来说它可能太复杂了，所以现在只需你感受它带给你的精彩。
另外一个精彩的例子就是Simple Task任务跟踪程序，它加载了Google Gears的数据库。
Ext: 不仅仅是另一个JS库：Ext不仅仅是另一个JS库，实际上它可以通过适配器（adapter）和其它JS库一起工作。
我们将在本章的稍后来介绍适配器。
通常来说，我们使用Ext的目的是满足高层次的用户交互——要比我们传统概念上的站点交互性更强。
EXTjs入门
入门环境要求浏览器ExtJs支持所有主要的网络浏览器，从IE6到最新版本的谷歌浏览器，在开发调试工程中，我们推荐您使用：这篇教程假设你使用的是最新版本的谷歌浏览器。
如果你没有，花一点时间来安装它,并自己熟悉其开发工具。
服务器尽管不是必须，我们建议你使用本地网络服务器。
由于XHR 在本地文件时大多数浏览器有协议限制。
我们建议安装：Apache安装启动后，通过浏览器访问localhost，你应该看到一个Apache启动成功网页。
Ext JS 4 SDK下载SDK解压到服务器WEB目录的新建文件夹“ExtJS”下，不清楚服务器的WEB目录请参考服务器的手册。
这个路径和操作系统有关。
一般来说Apache的WEB目录为：浏览http://localhost/extjs/index.html看到Ext的欢迎页面就算安装成功了。
应用构架基本结构尽管不是强制的,下面列出的所有建议应看作是你的指导方针保证您应用是有效组织、可扩展和可维护的。
以下是建议的Ext目录结构为:不要着急立即完成所有这些目录，现在让我们专注开发Ext 应用必要的最少代码。
我们将创造一个基本的"Hello Word"应用：称为“Hello Ext”。
在您的网页根目录创造下列目录和文件。
将包含Extjs SDK的Extjs文件夹放到helloext目录下。
典型的Ext应用包含单一的Html文档--index.html文件：下面是应用程序逻辑：---app.js打开浏览器浏览http://localhost/helloext/index.html。
将看到一个面板标题为"Hello Ext"，内容为"welcome"。
动态加载ExtJS4支持延迟-动态加载。
例如Ext.create创建了一个Ext.container.Viewport实例。
在Ext.create被调用时，加载器首先减产Ext.container.Viewport是否定义。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
序言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简介ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。
ExtJS可以用来开发RIA也即富客户端的AJAX应用，下面是一些使用ExtJS开发的应用程序截图：(wlr的blog应用)(ExtJS的表格控件)(不同主题的ExtJS弹出框效果)ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing 等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
第二章、开始ExtJS2.1获得ExtJS要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址/download，进入下载页面可以看到大致如图xxx所示的内容，可以选择选择1.1或2.0版本，本教程使用的2.0版本。
图1-1ExtJs不同版本下载选择页面单击上图中的【Download ext-2.0.zip】超链接进行下载，把下载得到的ZIP压缩文件解压缩到【D:\ExtCode】目录下，可以得到如如图1-2所示的内容。
图1-2ExtJS发布包目录adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。
build：压缩后的ext全部源码(里面分类存放)。
docs：API帮助文档。
exmaples：提供使用ExtJs技术做出的小实例。
resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。
source：无压缩Ext全部的源码(里面分类存放)遵从Lesser GNU（LGPL）开源的协议。
Ext-all.js：压缩后的Ext全部源码。
ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。
ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。
ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。
2.2、应用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库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，因此可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用程序的代码大致如下：fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：2.3、ExtJS 版的HelloWorld下面我们写一个最简单的ExtJS 应用，在hello.html文件中输入下面的代码：图1-11hello.html 页面效果进一步，我们可以在页面上显示一个窗口，代码如下：所示。
在浏览hello.html，即可得在屏幕上显示一个窗口，如图xxx Array第三章Ext框架基础及核心简介3.1、Ext类库简介ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。
ExtJS的类库由以下几部分组成：底层API(core)：底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。
其它控件都是建立在这些底层api的基础上，底层api位于源代码目录的core子目录中，包括DomHelper.js、Element.js等文件，如图xx所示。
控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。
控件位于源代码目录的widgets子目录中，包含如图xx所示。
实用工具Utils：Ext提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON 数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能，如图所示：3.2、Ext的组件Ext2.0对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件，Ext组件是由Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。
ExtJS中的组件体系由下图所示：组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。
3.3、组件的使用组件可以直接通过new关键子来创建，比如控件一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。
当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。
比如下面的例子：运行上面的代码可以实现如下图所示的结果：可以省掉变量obj，直接写成如下的形式：render方法后面的参数表示页面上的div元素id，也可以直接在参数中通过renderTo参数来省略手动谳用render方法，只需要在构造函数的参数中添加一个renderTo属性即可，如下：对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要父组件的构造函数中，通过给属性items传递数组方式实现构造。
如下面的代码：注意中括号中加粗部份的代码，这些代码定义了TabPanel这个容器控件中的子元素，这里包括三个面板。
上面的代码与下面的代码等价：前者不但省略掉了new Ext.Panel这个构造函数，最重要前者只有在初始化TabPanel的时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。
也就是说，前者实现的延迟加载。
3.4、组件的配置属性在ExtJS中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。
比如配置一个面板：再比如创建一个按钮：再比如创建一个Viewport及其中的内容：每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的配置属性，另外子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。
学习及使用ExtJS，其中最关键的是掌握ExtJS中的各个组件的配置属性及具体的含义，这些配置属性在下载下来的ExtJS源码文档中都有详细的说明，可以通过这个文档详细了解每一个组件的特性，如下图所示：由于所有的组件都继承自ponent，因此在这里我们列出组件基类Component中的配置属性简单介绍。
配置属性名称类型简介allowDo mMove Boolean当渲染这个组件时是否允许移动Dom节点（默认值为true）。
applyTo Mixed混合参数，表示把该组件应用指定的对象。
参数可以是—节点的id，一个DOM节点或一个存在的元素或与之相对应的在document中已出现的id。
当使用applyTo，也可以提供一个id或CSS的class名称，如果子组件允许它将尝试创建一个。
如果指写applyTo选项，所有传递到renderTo方法的值将被忽略，并且目标元素的父节点将自动指定为这个组件的容器。
使用applyTo选项后，则不需要再调用render()方法来渲染组件。
autoSho w Boolean自动显示，如为true，则组件将检查所有隐藏类型的class（如：’x-hidden’或’x-hide-display’并在渲染时移除(默认为false)。