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教程
ext教程EXT（JavaScript Extensions）是一种用于制作浏览器扩展的标准，它允许开发者以交互式方式修改和自定义Web页面的行为和外观。
在本教程中，我们将介绍如何使用EXT来开发浏览器扩展。
我们将涵盖EXT的基本概念、开发环境的设置、常用API的使用以及实例应用的创建。
首先，我们需要了解EXT的基本概念。
EXT是基于JavaScript 和HTML的，它允许我们通过注入代码来修改Web页面的行为。
我们可以使用EXT来添加自定义按钮、修改页面样式、拦截网络请求等。
为了开始开发EXT扩展，我们需要设置开发环境。
首先，我们需要安装一个支持EXT的浏览器，如Google Chrome或Mozilla Firefox。
然后，我们需要安装开发者工具，如Chrome开发者工具或Firefox开发者工具。
接下来，我们将介绍EXT的常用API。
EXT提供了一组API，用于访问和修改Web页面的各个部分。
例如，我们可以使用API来找到页面上的特定元素，修改其样式或内容。
我们还可以使用API来发送网络请求或拦截已有的请求。
最后，我们将创建一个实例应用来演示EXT的使用。
我们将开发一个简单的扩展，用于在Facebook页面上添加一个自定义按钮。
当用户点击按钮时，它会向后台服务器发送一个请求，并显示返回的数据。
在这个实例应用中，我们将演示如何创建一个扩展程序，并在Manifest文件中指定其基本属性。
我们还将展示如何使用Content Script来注入我们的代码到页面中，并使用Popup来创建一个显示在浏览器窗口中的弹出窗口。
通过这个教程，您将学习到EXT的基本概念、开发环境的设置、常用API的使用以及实例应用的创建。
您将了解如何使用EXT来修改和自定义Web页面的行为和外观。
这将对您开发具有定制功能的浏览器扩展非常有帮助。
总结来说，EXT是一种用于制作浏览器扩展的标准，它允许开发者以交互式方式修改和自定义Web页面的行为和外观。
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支持将数据与组件进行绑定，以实现动态数据的展示和交互。
通过设置数据模型和绑定关系，可以在数据更新时自动更新组件的显示内容。
ExtJS2.0开发与实践笔记[0]——初识ExtJS
![ExtJS2.0开发与实践笔记[0]——初识ExtJS](https://img.taocdn.com/s3/m/4f28700502020740be1e9b0b.png)
ExtJS2.0开发与实践笔记[0]——初识ExtJS简短的前言：随着网络技术的发展，良好的用户体验及丰富的客户端功能已成为Web程序所共同追逐的目标，并扮演非常重要的一环。
基于Ajax应用思想的盛行，prototype、ext、dojo、yui、mootools等越来越多的第三方开源Javascript Library开始涌现，虽然这极大地增加了我们对web应用的扩展可能性，但同时也或多或少的增加了我们的学习难度。
为此，我准备在blog中逐步整理学习心得，已备查找需要及看客指正。
什么是ExtJS?按照Ext开发团队的说法，ExtJS从应用角度上讲是一个用户界面库，而不是一个JavaScript Library。
原本作为Yahoo! UI Library(也就是YUI)的扩展而被开发出来，但从1.1版本开始由于支持者的增多，已经得到了必要的扩充，不再依赖于YUI。
ExtJS可以与prototype.js和jquery等成熟的js库一起使用，也可以作为单独的应用部署到开发中去，Adobe AIR与iPhone开发工具都提供了对Ext的支持。
就我个人的观点而言，在业务处理上讲ExtJS2.0已非常完备，足以满足绝大多数web表示层应用的需求；但是对于解释执行的javascript来讲性能损耗问题却始终无法避免，因此个人不建议在要求响应速度的项目中使用ExtJS进行开发。
ExtJS并不是一个完全免费的项目，他以普通开源版及企业版共存的方式发行，企业版收费标准如下图：<!--[endif]-->我们可以通过/download来获得最新版本的ext框架。
发展简史：运行效果图：<!--[endif]-->如何开发ExtJS2.0应用？针对ExtJS2.0，由于其通过浏览器解释执行，所以我们即可以使用记事本、EditPlus、UltraEdit等方式直接编辑文本文件，也可以通过IDE进行调试开发。
extjs中文说明
EXT 中文手册开发必备该文档内容取自互联网，详细的介绍了EXT的各部分内容，希望对大家有所帮助pjq2008-5-25EXT 中文手册EXT 中文手册pjq 收集整理22008EXT 中文手册前言本手册所有内容均粘贴自互联网，如有错误，请多见谅。
EXT 中文手册EXT 中文手册pjq 收集整理32008目录EXT 中文手册 (1)EXT 简介 (5)目目錄錄 (5)下载Ext (6)开始！ (6)Element：Ext 的核心 (6)获取多个DOM 的节点 (7)响应事件 (7)使用Widgets (9)使用Ajax (11)EXT 源码概述 (13)揭示源代码 (13)发布Ext 源码时的一些细节 (14)我应该从哪里开始？ (15)适配器Adapters (15)核心Core (15)Javascript 中的作用域（scope） (15)事前准备 (15)定义 (15)正式开始 (16)window 对象 (16)理解作用域 (17)变量的可见度 (17)EXT 程序规划入门 (18)事前准备 (18)需要些什么？ (18)applayout.html (18)applayout.js (19)公开Public、私有Private、特权的Privileged？ (21)重写公共变量 (23)重写（Overriding）公共函数 (23)DomQuery 基础 (24)DomQuery 基础 (24)扩展EXT 组件 (31)文件的创建 (31)Let's go (35)完成 (37)EXT 的布局（Layout） (39)简单的例子 (40)加入内容 (43)开始使用Grid (53)EXT 中文手册EXT 中文手册pjq 收集整理42008步骤一定义数据(Data Definition) (53)步骤二列模型（Column Model） (54)Grid 组件的简易分页 (55)d G rid 数据 (55)的怎么做一个分页的d Gr id (56)栏分页栏r T ool ba r (56)EXT Menu 组件 (57)创建简易菜单 (57)种各种m Item 的类型 (59)m I tem 属性 (59)在在I UI 中摆放菜单 (59)u M enu 的分配方式： (60)练一练 (62)到动态添加菜单按钮到r Too lb ar (62)更方便的是 (63)下一步是 (63)模板（Templates）起步 (63)第一步您的HTML 模板 (63)第二步，将数据加入到模板中 (64)下一步 (64)学习利用模板（Templates）的格式化功能 (64)正式开始 (64)下一步 (66)事件处理 (66)非常基础的例子 (66)处理函数的作用域 (66)传递参数 (67)类设计 (67)对象创建 (67)使用构造器函数 (68)方法共享 (68)表单组件入门 (69)表单体 (69)创建表单字段 (69)完成表单 (70)下一步 (71)为一个表单填充或提交数据 (71)让我们开始吧 (71)读取我们的数据 (72)EXT 中的继承 (73)补充资料 (74)Ext 2 概述 (74)组件模型Component Model (76)容器模型Container Model (80)EXT 中文手册EXT 中文手册pjq 收集整理52008布局Layouts (81)Grid (84)XTemplate (84)DataView (85)其它新组件 (85)EXT2 简介 (86)下载Ext (86)开始！ (87)Element：Ext 的核心 (87)获取多个DOM 的节点 (88)响应事件 (88)使用Widgets (90)編輯使用Ajax (93)TabPanel 基础 (96)Step 1: 创建HTML 骨架 (96)Step 2: Ext 结构的构建 (97)Step 3: 创建Tab 控制逻辑 (99)EXT 简介无论你是Ext 库的新手，抑或是想了解Ext 的人，本篇文章的内容都适合你。
Extjs5开发学习-28-加入模块和菜单定义[1建立数据库和表]
![Extjs5开发学习-28-加入模块和菜单定义[1建立数据库和表]](https://img.taocdn.com/s3/m/a3afc5f8804d2b160a4ec02a.png)
Extjs5开发学习-28-加入模块和菜单定义[1建立数据库和表]下面我们开始进入自定义系统的设计和各个组成部分的搭建工作。
首先在sql server中建立数据库，这里的数据的名字我定义为extjs5，然后需要建立模块的定义表，这个表里将存着系统中所有模块的定义信息。
为了能有个直观的前后台的互动，先把模块和菜单这二个部分加进去，可以把菜单数据组织好后发送到前台去进行展示。
由于系统中的模块很多，需要分类，因此在先要设计一个“模块分组”的表，对于菜单也是一样，需要有一个“菜单分组”的表。
▪模块分组表：_ModuleGroup▪模块表：_Module▪菜单分组表：_MenuGroup▪模块的菜单定义表：_MenuModule一、数据库中建表四个表的关系如下图所示：下面是建表的语句：[sql]view plain copy1.CREATE TABLE [dbo].[_ModuleGroup](2. [tf_moduleGroupId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,3. [tf_title] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,4. [tf_description] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,5. [tf_iconURL] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,6. [tf_remark] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,7.CONSTRAINT [PK___ModuleGroup__08EA5793] PRIMARY KEY CLUSTERED8.(9. [tf_moduleGroupId] ASC10.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY],11.CONSTRAINT [_ModuleGroup_ix1] UNIQUE NONCLUSTERED12.(13. [tf_title] ASC14.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]15.) ON [PRIMARY][sql]view plain copy1.CREATE TABLE [dbo].[_Module](2. [tf_moduleId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,3. [tf_moduleGroupId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,4. [tf_moduleName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,5. [tf_title] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,6. [tf_description] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,7. [tf_requestMapping] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,8. [tf_iconURL] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,9. [tf_shortname] [nvarchar](20) COLLATE Chinese_PRC_CI_AS NULL,10. [tf_englishname] [nvarchar](20) COLLATE Chinese_PRC_CI_AS NULL,11. [tf_tableName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,12. [tf_primaryKey] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,13. [tf_nameFields] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,14. [tf_titleTpl] [nvarchar](200) COLLATE Chinese_PRC_CI_AS NULL,15. [tf_codeField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,16. [tf_orderField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,17. [tf_dateField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,18. [tf_yearField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,19. [tf_monthField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,20. [tf_seasonField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,21. [tf_fileField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,22. [tf_homepageTag] [int] NULL,23. [tf_isEnable] [bit] NOT NULL,24. [tf_hasBrowse] [bit] NOT NULL,25. [tf_hasInsert] [bit] NOT NULL,26. [tf_hasEdit] [bit] NOT NULL,27. [tf_hasDelete] [bit] NOT NULL,28. [tf_hasExec] [bit] NOT NULL,29. [tf_hasAuditing] [bit] NOT NULL,30. [tf_hasApprove] [bit] NOT NULL,31. [tf_hasPayment] [bit] NOT NULL,32. [tf_hasAddition] [bit] NOT NULL,33. [tf_isInlineOper] [bit] NULL CONSTRAINT [DF___Module__tf_isIn__1ED998B2] DEFAULT ((0)),34. [tf_allowInsertExcel] [bit] NOT NULL,35. [tf_allowEditExcel] [bit] NOT NULL,36. [tf_defaultOrderField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,37. [tf_codeLevel] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,38. [tf_linkedModule] [nvarchar](200) COLLATE Chinese_PRC_CI_AS NULL,39. [tf_hasChart] [bit] NOT NULL,40. [tf_canLimit] [bit] NOT NULL,41. [tf_isSystem] [bit] NOT NULL,42. [tf_searchCondOrder] [int] NULL,43. [tf_remark] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,44.CONSTRAINT [PK___Module__1BFD2C07] PRIMARY KEY CLUSTERED45.(46. [tf_moduleId] ASC47.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY],48.CONSTRAINT [_Module_ix1] UNIQUE NONCLUSTERED49.(50. [tf_moduleName] ASC51.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY],52.CONSTRAINT [_Module_ix2] UNIQUE NONCLUSTERED53.(54. [tf_title] ASC55.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]56.) ON [PRIMARY]57.58.GOE [extjs5]60.GO61.ALTER TABLE [dbo].[_Module] WITH CHECK ADD CONSTRAINT [_Module_fk1]FOREIGN KEY([tf_moduleGroupId])62.REFERENCES [dbo].[_ModuleGroup] ([tf_moduleGroupId])63.ON UPDATE CASCADE[sql]view plain copy1.CREATE TABLE [dbo].[_MenuGroup](2. [tf_menuGroupId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,3. [tf_title] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,4. [tf_description] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,5. [tf_glyph] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NULL,6. [tf_iconURL] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,7. [tf_remark] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,8. [tf_expand] [bit] NULL,9.CONSTRAINT [PK___MenuGroup__1920BF5C] PRIMARY KEY CLUSTERED10.(11. [tf_menuGroupId] ASC12.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY],13.CONSTRAINT [_MenuGroup_ix1] UNIQUE NONCLUSTERED14.(15. [tf_title] ASC16.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]17.) ON [PRIMARY][sql]view plain copy1.CREATE TABLE [dbo].[_MenuModule](2. [tf_menuModuleId] [int] NOT NULL,3. [tf_menuGroupId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,4. [tf_moduleId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,5. [tf_orderId] [int] NULL,6. [tf_addSeparator] [bit] NULL,7. [tf_parentMenu] [nvarchar](20) COLLATE Chinese_PRC_CI_AS NULL,8. [tf_title] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,9. [tf_parentFilter] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,10.CONSTRAINT [PK___MenuModule__2C3393D0] PRIMARY KEY CLUSTERED11.(12. [tf_menuModuleId] ASC13.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]14.) ON [PRIMARY]15.16.GOE [extjs5]18.GO19.ALTER TABLE [dbo].[_MenuModule] WITH CHECK ADD CONSTRAINT [_MenuModule_fk1] FOREIGN KEY([tf_menuGroupId])20.REFERENCES [dbo].[_MenuGroup] ([tf_menuGroupId])21.ON UPDATE CASCADE22.GO23.ALTER TABLE [dbo].[_MenuModule] WITH CHECK ADD CONSTRAINT [_MenuModule_fk2] FOREIGN KEY([tf_moduleId])24.REFERENCES [dbo].[_Module] ([tf_moduleId])25.ON UPDATE CASCADE建立表后加入一些数据：。
- 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)。