ExtJS入门教程(超级详细)
ExtJs中文教程
Ext入门基础
get,getDOM,getCmp的区别 DOM的增删改查
尺寸&大小,定位
动画
事件 类编程 AJAX
Ext入门基础
要学习及应用好Ext框架，必须需要理解Html DOM、Ext Element及 Component三者之间的区别。 每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都 有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作 DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象) 仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某 一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以 使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实 用方法。(通常使用Ext.get获得Element对象) 对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要 显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立 了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件 Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽 象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成 最终的页面效果。(通常使用Ext.getCmp获得Component对象)
方位、尺寸（如getHeight、getWidth）
Ext入门基础
DOM查询
获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。 Ext.get('elId').next(); 类似的还有: Ext.get(„elId‟).prev();//上一个侧边节点 Ext.get(„elId‟).first();//第一个节点 Ext.get(„elId‟).last();//最后一个节点 Ext.get(„elId‟).parent();//父节点 比如要获取页面上所有的p标签,则可以使用: var ps = Ext.select('p'); 这样你就可以对所要获取的元素进行操作了,select()方法返回的是 positeElement对象,可以通过其中的each()方法对其所包含的元素进行遍历: ps.each(function(el) { el.highlight();//高亮 }); 当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于CompositeElement 对象上,如: ps.highlight();//select方法返回的结果可直接如同Element般地操作 或是: Ext.select('p').highlight(); 当然,select参数还可以更复杂一些,其中可以包括CSS选择符,基本的XPath,HTML属性等
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培训进阶教程
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.x中文API学习教程
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快速入门指南一、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(入门篇10)UsingViewsinyourApplications
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使用总结（非常详细）
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教程_第一章_起步
第一章起步在这章里，我们将介绍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的目的是满足高层次的用户交互——要比我们传统概念上的站点交互性更强。