ExtJs

extjs

目录

序言

Ext发展史

什么是EXT

ExtJs UI Engine简介

Ext学习及应用经验小结

编辑本段序言

　　ExtJS是一种主要用于创建前端用户界面，是一个基本与 后台技术无关的前端 ajax框架。

　　功能丰富，无人能出其右。

　　无论是界面之美，还是功能之强，ext的 表格控件都高居榜首。

　　单选行，多选行，高亮显示选中的行，拖拽改变列宽度，按列排序，这些基本功能ExtJS轻量级实现。

　　自动生成 行号，支持checkbox 全选，动态选择显示哪些列，支持本地以及远程 分页，可以对 单元格按照自己的想法进行渲染，这些也算可以想到的功能。

　　再加上可编辑 grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext 表格控件里实现了。

　　其实从ext3开始就支持各种方式的统计，且有控件支持 excel导出。

编辑本段Ext发展史

　　1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo! User Interface (YUI)库进行自定义的扩展，但后来一度风头盖过其父辈YUI，足以说明 大家对它的热情，很多人把它投入项目，但并不十分了解它。分析人士打了一个比喻：就好比尚未谋面， 并不了解一个人的家庭、教育、品行等背景，只因为他有一副精致漂亮的外观，就对其陷入了疯狂的倾慕之中。因此分析人士建议，在投入项目前，要认真仔细地了 解EXT的内在原理和与其他Ajax库不同地方。

　　2、在2006年初 ，Jack Slocum(杰克.斯洛克姆 ) 就一套公用设施扩建为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-4.0.7

　　8、2010年6月15日，当开发者访问著名的JavaScript库ExtJS网站，会发现自己被重导向到另一个不熟悉的网址和界面sencha。原来，，ExtJS项目已经与触摸屏代码库项目 jQTouch和SVG处理库Raphael合并，后两个项目的创始人David Kaneda和Dmitry Baranovskiy也将加入ExtJS。此举是ExtJS为了应对HTML5等新趋势，加强丰富图形和触摸屏功能的重要举措。

　　9、2011年4月22日，Extjs4.0正式发布，主要有以下改进：

　　核心改进：检视框架的架构和重塑其基础。这些变化不单提供了产品性能，还提高了其健壮性。

　　测试 框架：在所有支持的 浏览器上对框架进行了持续全面的测试。

　　类系统：作为Extjs 4架构更新的一部分，引用了一个功能更完整的类系统。

　　 沙盒：在ExtJS历史上，ExjJS 4首次提供了完整的沙盒模式。从ExtJS 4开始， 框架不再扩展 数组或函数等原生对象，因此，与其它的框架同时加载到页面时，再也不会产生冲突。

　　应用架构：在ExtJS 4，引入了一个标准化的几乎适合任何ExtJS 应用程序的MVC风格的应用架构。使用MVC，开发团队只需要学习一种架构就能理解任何ExtJS 4的应用。

　　SDK工具：正在测试beta版的 Sencha SDK工具，在第一版本中包括了优化工具、生成器和slicer工具。这些工具可让你优化Javascript程序，以确保主题能在IE6正常工作。

　　全新的图表库：ExtJS4中， 全新的、 插件自由的图表库是最激动人心的新功能之一，创建了饼图、线图、面积图、雷达图等等，所有这些都是动画的、易于配置的和可扩展的。

　　更智能的渲染和布局：引入了新的渲染和布局管道，只有在需要的时候才更新DOM，从而让应用更快。改进了布局本身，删除了FormLayout，意味着你能使用任何布局组合创建最完美的 表单。

　　增压的数据包：ExtJS一个基础性的作品就是数据包。不管你将数据加载到Grid、tree或其它组件，改进的数据包，都比以往更容易。新架构还支持HTML的localStorage，数据流可轻松在你的应用中进出。

　　10、 2012年3月14日，Extjs4.1正式发布，主要功能:

　　 1、网格

　　 大型数据页面的无限/缓冲滚动功能得到很大改进。同时，对于 网格的“锁定”功能，新增了锁定和未锁定两种状态。

　　 2、布局

　　在布局上， 通过避免浏览器回流来加快访问速度（浏览器回流，指浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程）。同时，新增了“边界”布局方式。收缩包围的宽度问题，以前是用特定组件来处理，现在改为用核心组件来处理。

　　 3、核心组件

　　XTemplates和方法重写功能得到显著改善。 Ext.override现在开始支持重写实例方法，并且，可以通过使用标准的callParent函数来访问被重写的方法。

　　此外， 4.1版本开始支持通过使用函数名来实现事件监听器。

编辑本段什么是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、AjaxNET，或其它JS库转变为 Ext的底层。

　　Ext从2.x开始收费，这给他的应用前景带来一些问题。不过对国内开发人员的影响不大，毕竟是客户付款。

　　Ajax只是Js框架中的一个子集

编辑本段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等就会变得简单得多。

　　同样的道理，对于Ext的 表单字段来说，不管是ComboBox，NumberField、还是DateField，他们其它都是 Ext.form.Field类的子类，在他上面定义了表单字段的各种基本操作及特性。在学习使用 表单字段组件时，一定要重点研究Field这个类，掌握他的主要方法、事件等，就能有助于更好的学习使用其它的字段。

　　四、学习及研究示例

　　由于javascript语言非常灵活，不像静态 强类型语言（比如Java）那样有固定的代码设计模式，而往往是不同的人就有不同的编程风格。在实际应用开发中，只有见多识广，才能在自己的在脑中建立一个开发库。

　　学习别人的示例对于我们开发帮助会非常大，示例包括基本组件的应用、综合应用等多个方面。在此，简单推荐几个。

　　1、Ext官方示例，在ext项目下载包的examples目录中，包括各个控件的基本应用演示，同时还有一些比较复杂的组合示例，有简有繁，非常适合初学者认真研究。

　　2、Vifir推出的示例，Vifir推出的一些示例主要包括两类，一种是开源的示例应用，另外一种是针对VIP用户的实用示例。开源的示例主要是指 wlr单用户blog系统，这个一个集合了前 后台技术的ext综合示例，而针对VIP用户的实用示例则是可以作为开发骨架或扩展组件的示例。

　　3、其它示例，在ext社区中还有很多比较优秀的ext应用示例，有些只是一个应用演示，虽然没有提供源码下载，但我们可以直接下载引用的js文件来得到这些示例的ext应用代码，同样能取起到非常好的学习效果。

　　五、多运用

　　Ext看起来是非常简单的东西，稍有点编程知识的人，按照《ExtJS实用开发指南》中的入门指南，半小时就能学会使用Ext。然而，当准备使用Ext开发一个项目时，却不知道从何处入手，或者是在使用Ext的时候，出了一点小问题自己不知道该如何解决。编程是一门实践性的科学，仅仅靠看书、看别人写的代码是远远不够的，因此，必须多做实践才行，只有通过不断的练习，大量的使用，才能对Ext的组件特性、事件、事件处理机制以及与服务器端交互接口等深入的掌握，只有多做运用，深入了解ext的组件的工作原理及机制，才能编写出高级的Ext的应用。

　　六、熟读Ext项目的 源代码

　　如果要想深入应用Ext，那么阅读Ext项目的 源代码这是必不可少的环节，Ext的代码质量非常高，通过阅读他的代码我们可以更加深刻的了解 javascript 面向对象编程，Ext代码中包含了很多高级的js技巧以及设计模式。在使用Ext的过程中，我们经常根据项目的需要对Ext组件进行扩展，设计自己的组件或控件，而如何实现一个自定义的Ext组件，我们可以从Ext的各个组件 源代码中找到答案。

　　Ext的 源代码在Ext项目的source目录。读Ext源码，并不一定非要从某一个地方开始，而组件核心代码Component.js、 容器组件代码 Container.js、面板Panel.js等这些是必看的； core目录中的Element.js、Ext.js等也是必看的。当需要从一个控件进行扩展的时候，最好能简单看一看这个控件的 源代码。

　　七、理解，熟悉，掌握Json

　　在项目中，Ext本身的华丽外表就很吸引眼球了，但这仅仅是其外在的美，还有最核心的内在美，即：Json。Json(JavaScript Object Notation) 是一种数据交互格式，一个不能实现数据交互功能的项目是没有任何意义的，大多的Ajax 框架的数据交互都基于Json，如：jQuery、ExtJs等。因此理解Json掌握Json并熟练运用是很重要的。以目前主流的开发语言为例，.NET已经把Json 封装到类中，无需配置，直接与数据库交互，轻松的封装直接使用；Java就麻烦些，必须去下一个Json包，然后再做一些配置，才可以使用；PHP和Java差不多，也必须下载一个Json 插件（和类相似），但是不用配置，直接封装使用。在实际的项目中，各自的取舍配置，都基于项目和需求，并不是每个项目（针对WEB）都一定要用到。但是，如果想在项目中用到此类的Ajax 框架，Json的掌握又是必须的。