日期:2014-05-16  浏览次数:20434 次

Ext JS介绍 以及 Ext JS-Ext学习及应用经验小结
Ext JS-序言    
  2.1. 功能丰富,无人能出其右 
  无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 
  单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了。 
  自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 
  再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里实现了。 
  不过ext也不是万能的,与fins的ecside比较,ext不能锁定列,也没有默认的统计功能,也不支持excel,pdf等导出数据。另外fins说,通过测试ecside的效率明显优于ext呢。:
Ext发展史 
  1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展,但后来一度风头盖过其父辈YUI,足以说明 大家对它的热情,很多人把它投入项目人并不十分了解它。分析人士打了一比喻:就好比尚未谋面, 并不了解一个人的家庭、教育、品行等背景,只因为他有一副精致漂亮的外观,就对其陷入了疯狂的倾慕之中。因此分析人士建议,在投入项目前,要认真仔细地了 解EXT的内在原理和与其他Ajax库不同地方。 
  2、在2006年初 ,Jack Slocum(杰克斯·洛克姆 ) 就一套公用设施扩建为Yahoo! User Interface (YUI) 库而工作。这些扩展很快组织成一个独立的库代码并以” yui-ext” 的名义下发布。 
  3、在2006年秋天,Jack发行了版本为0.33的yui-ext,而最终被证明为最后版本的代码,根据这名字(下开放源代码DSB许可)。在年底之前,这个库已大受欢迎, 名字被简化为Ext,反映了它作为一个框架的成熟和独立。 
  该公司成立于2007年初,Ext现在为双执照,使用LGPL和一个商业执照。 
  4、在2007年4月1日,发布1.0正式版。 
  5、直至今日(2008年4月1日)ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户,现在的版本为Ext-3.0 
  6、官方在2009年4月14-16日的首次Ext Conference中发布了Ext的3.0 RC版本。 
Ext JS-什么是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官方网站http://extjs.com/
Ext JS-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、Ajax.NET,或其它JS库转变为 Ext的底层。 
  Ext从2.x开始收费,这给他的应用前景带来一些问题。不过对国内开发人员的影响不大,毕竟是客户付款。 

Ext 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({i