下载文档原格式
ExtJS培训进阶教程软件确实是服务名目1什么是ExtJs (3)2ExtJs的使用 (3)2.1猎取ExtJs (3)2.2应用Extjs (3)2.3演示HelloWorld (4)3get,getDOM,getCmp (4)3.1getDom方法 (4)3.2get方法 (5)3.3getCmp方法 (5)4事件 (8)5ExtJs所包含组件 (9)5.1ExtJS组件分类 (9)6ExtJs常用组件介绍 (11)6.1Panel组件 (11)6.1.1panel例如 (11)6.1.2panel的布局 (12)6.1.3panel属性简介 (14)6.2ViewPort组件 (15)6.3表格控件及其内部属性 (17)6.3.1简单的Grid (17)6.3.2Grid的功能详解 (19)6.4按钮 (27)7Ext.Ajax.request (28)8Ext同步/异步要求 (29)1什么是ExtJsExtJs是能够用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。
ExtJs是一个用javascript编写，与后台技术无关的前端ajax框架。
因此，能够把ExtJs用在.Net、Java、Php等各种开发语言开发的应用中。
2ExtJs的使用2.1猎取ExtJs猎取ExtJs://extjs .cn/download公司使用ExtJs版本为2.02.2应用Extjs应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件要紧包含两个，adapter/ext/ext-base.js 及ext-all.js(ext/build/locale/ext-lang-zh_CN.js)，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。
Extjs4 学习指南（仅供学习使用、转载需注明出处）Extjs4可用的学习资料少之又少，本文内容大部分为网络整理、方便学习者使用，如有出入以extjs4 api文档为准。
Extjs初步获取Extjs下载extjs：可以从/ 获得需要的extjs发布包及更多支持。
搭建学习环境：假设您的机器已经安装myeclipse和tomcat，如果没有请参阅其他相关资料。
myeclipse建立新Web project项目Extjs4并且将extjs4.0.7压缩包解压后的全部文件复制到项目的Webroot目录下Examples目录为ext官方提供的例子程序，其中可能包涵php的代码，错误信息可以暂时不理会。
部署并且启动tomcat，测试环境是否可用。
打开浏览器，输入http://localhost:8080/Ext4/index.html假设您的tomcat端口为8080您会看到以下界面，证明环境已经搭建成功！查看api文档http://localhost:8080/Ext4/docs/index.html查看示例页面http://localhost:8080/Ext4/examples/index.html 测试例子开始...Html文件中只引入了一个css和2个js文件，注意引用路径和你建立文件路径是否能匹配，如果路径没有问题的话，打开浏览器输入http://localhost:8080/Ext4/helloworld.html您将会看到浏览器里显示一个panel，标题是Hello Ext,内容Hello! Welcome to Ext JS.，如果没有，请查看是否有路径不匹配。
其他：在ExtJS里最常用的,应该就是Ext.onReady和Ext.application这两个个方法了,而且它也可能是你学习ExtJS所接触的第一个方法,这个方法在当前的DOM加载完毕后自动调用,保证页面内的所有元素都能被Script所引用.可以尝试在这个方法中添加一条语句,看看页面打开后是什么反映（先建立js和html文件，将如下代码加入js文件中，html文件相应引入对应的js文件，本获取元素还有一个常用的方法,就是获取页面上的元素了,ExtJS提供了一个get方法,可以根据ID取到页面上的元素:var myDiv = Ext.get('myDiv');会取到页面上ID为'myDiv'的元素.如果使用Element.dom的方法,则可以直接操作底层的DOM节点,Ext.get返回的则是一个Element对象.在不能使用这种方式来获取多个DOM的节点,或是要获取一些ID不一致,但又有相同特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的标签,则可以使用:var ps = Ext.select('p');这样你就可以对所要获取的元素进行操作了,select()方法返回的是positeElement对上,如:ps.highlight();或是:Ext.select('p').highlight();当然,select参数还可以更复杂一些,其中可以包括W3C Css3Dom选取器,基本的XPath,HTML 属性等,详细情况,可以查看DomQuery API的文档,来了解细节.事件响应获取到了元素,则可能会对一些元素的事件进行一些处理,比如获取一个按钮,我们为它添加一个单击事件的响应:当然,你可以把事件的响应加到通过select()方法获取到的元素上:});WidgetsExtJS还提供了丰富的UI库来供大家使用.Extjs4布局详解Fit布局在Fit布局中，子元素将自动填满整个父容器。
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的各种控件。
Using Views in your Applications本系列文章为翻译文章，翻译自API文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。
从用户的角度看，我们的应用程序只不过是视图的集合。
尽管大多有价值的部分都在控制器和模型中，但是视图却是和用户直接交互的。
在本指导文档中，将就如何构建我们应用程序的视图展开叙述。
Using Existing Components最简单的方式就是使用Ext.create函数来创建一个已经定义好的组件。
例如我们可以创建一个特别简单的panel，仅仅包括一些html内容：该代码十分简单，只是创建一个全屏的组件，里面包含了一些文字内容。
我们可以使用该方法创建任意的内在组件，但是比较实用的方法是，我们创建该组件的子类，以便实现我们自定义：虽然看起来，结果是相同的，但是我们有了一个我们自己的类，这就是我们需要遵循的模式—创建已有组件的子类，在我们需要的时候再对它进行实例化。
让我们看看这都有些什么变化：1.Ext.define函数允许我们创建一个新的类，继承我们已经存在的类。
2.我们遵循MyApp.view.MyView的命名规则，尽管我们可以任意命名，但是最好还是遵循我们的规则，方便以后管理以及程序的简单明了。
3.我们可以再config中定义新的配置项。
我们在定义我们的全新子类的时候，可以使用超类的配置项进行配置，或者在创建的时候，把该类的配置项作为参数传递进去，以便创建：A Real World Example下面我们来看一个比较规范的视图类文件，是Twitter中的文件：该类的定义，遵循了上面我们说的模式。
我们定义了我们自己的类Twitter.view.SearchBar，继承自框架中的Ext.Toolbar。
我们在定义的时候，使用了许多的配置项，例如布局和子项数组。
该代码中使用了两个比较重要的选项：requires：因为我们在子项数组中使用了一个searchfield，那么我们就需要使用requires 来手动定义依赖关系，让系统为我们使用searchfield加载Ext.field.Search类。
ExtJs使用总结（非常详细）一、获取元素（Getting Elements）1.Ext.getvar el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存2. Ext.flyvar el = Ext.fly('myElementId')//不需要缓存。
注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。
3.Ext.getDomvar elDom = Ext.getDom('elId'); // 依据id来查dom节点var elDom1 = Ext.getDom(elDom); // 依据dom节点来查dom 节点二、CSS元素4.addClassExt.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式5.radioClassExt.fly('elId').radioClass('myCls');//添加一个或多个className 到这个元素，并移除其所有侧边（siblings）节点上的同名样式。
6.removeClassExt.fly('elId').removeClass('myCls'); // 移除元素的样式7.toggleClassExt.fly('elId').toggleClass('myCls'); // 加入样式Ext.fly('elId').toggleClass('myCls'); // 移除样式Ext.fly('elId').toggleClass('myCls'); // 再加入样式8.hasClassif (Ext.fly('elId').hasClass('myCls')) {//判断是否已加上这个样式// 是有样式的……}10.replaceClassExt.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式11.getStylevar color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。
第一章起步在这章里，我们将介绍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支持所有主要的网络浏览器，从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 -序言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 用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。
