`

Ext介绍和学习资源

 
阅读更多

ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端 ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,由开发人员 JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一 款不可多得的JavaScript客户端技术的精品。

介绍

  功能丰富,无人能出其右

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

  单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了。

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

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

  呵呵~不过ext也不是万能的,与fins的ecside比较,ext不能锁定列(土豆说 1.x里支持锁定列,但是2.0里没有了,因为影响效率。),也没有默认的统计功能,也不支持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-2.0.2,并计划在2008冬/2009初推出Ext-3.0版本

什么是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、Ajax.NET,或其它JS库转变为 Ext的底层。

 

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

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等也是必看的。当需要从一个控件进行扩展的时候,最好能简单看一看这个控件的源代码。

扩展阅读:
1.http://www.vifir.com 开源人网站,编写了国内首本EXTJS开放方面的教程《EXTJS实用开发指南》,提供了专业的EXTJS技术培训和咨询服务
2.http://www.vifir.com/extjs/ EXTJS技术专题
3.http://www.softbk.com/news.asp?id=3624
4.http://extjs.com ext 官方站点
5.http://extjs.com/downloads 官方下载站点
6.http://ext.java2000.net Java世纪网,Ext专区
7.http://www.family168.com/ 国内专业的Extjs汉化和推广站点
8.http://topsvr.com/share/ExtJS/ ExtJS 全套视频教程
分享到:
评论

相关推荐

    ext学习资料 20篇详细学习笔记 初学者ext学习的文档

    这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...

    ext JS 源码和学习资料

    总之,这个压缩包是EXT JS学习者的宝库,不仅有源码供研究,还有丰富的中文文档和教程,无论你是初学者还是经验丰富的开发者,都能从中获益匪浅。通过深入学习EXT JS,你可以创建出更加丰富、动态的Web应用,提升你...

    不错ext学习网站~~~~~

    ExtShow是一个专门针对Ext JS开发者的网站,它不仅提供了大量的Ext JS组件示例,还允许用户在浏览器中直接编辑和运行代码,这为学习者提供了一个即时反馈的学习环境。这种互动式的学习方式极大地提高了学习效率,让...

    gwtext学习三部曲

    《gwtext学习三部曲》是一份专为GWT初学者设计的教程资源,它涵盖了gwtext和GWT Ext的相关知识。gwtext是Google Web Toolkit (GWT) 的一个扩展库,提供了丰富的用户界面组件和样式,使得在GWT平台上构建复杂的Web...

    ext学习资料ext学习资料

    Ext Js 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了一整套的组件,包括数据绑定,事件处理...通过深入学习和实践,开发者可以充分利用这个框架的强大功能,创造出令人印象深刻的Web应用。

    Gwt-ext学习笔记

    在阅读《Gwt-ext学习笔记.pdf》这份资料时,应重点学习上述知识点,并通过实践项目来加深理解。同时,关注Gwt-ext的更新和社区资源,以便获取最新的API信息和最佳实践。不断练习和探索,你将能够熟练运用Gwt-ext构建...

    ext学习手册(中英文版)

    "EXT学习手册"是针对EXT库的学习资源,分为中英文两个版本,主要涵盖了EXT的常用方法、属性以及整个EXT框架的介绍。对于初学者和有经验的开发者来说,这都是一个非常有价值的参考资料。 CHM(Compiled HTML Help)...

    ext学习文档

    通过以上对EXT学习文档的深入分析,我们可以看到EXT不仅提供了一套强大的工具集,还拥有丰富的文档资源。无论是初学者还是经验丰富的开发者,都能够从中受益匪浅。掌握了这些基础知识之后,开发者就能够更高效地构建...

    EXT学习小例子

    EXTJS是一种基于JavaScript的富客户端应用框架,专用于构建企业级的Web应用程序。...通过研究和运行这个项目,学习者可以了解EXTJS的数据管理、UI组件使用、事件处理等核心概念,从而快速上手EXTJS开发。

    Ext js 资源大全

    首先,我们来看"EXT学习文档 .doc",这可能是一份详细的EXT学习指南,涵盖了从基础到高级的各种主题。它可能包括了Ext JS的基本组件如窗口(Window)、面板(Panel)、表单(Form)、数据绑定(Data Binding)以及...

    ext PPT,EXT 教程,EXT 中文帮助手册,EXT 中文手册,ext_教程(入门到精通),Ext技术程序文档大全.

    4. **EXT学习文档**:这份文档可能提供了EXT的进阶学习路径,包括性能优化、无障碍访问性(Accessibility)以及EXT与其他技术(如PHP、Java等后端框架)的集成。 5. **EXT技术程序文档大全**和**ext_教程(入门到...

    有利于ext学习的小程序

    "有利于EXT学习的小程序"是一个专门为EXT初学者设计的项目,它包含了一个使用EXT框架开发的应用实例,可以帮助学习者更好地理解和掌握EXT的各种功能和用法。项目中可能包含了EXT的基本组件,如表格(Grid)、面板...

    Ext Demo, Ext学习入门

    Ext Demo 是一个专门为初学者设计的 ExtJs 学习资源,它涵盖了 ExtJs 的基本概念、组件使用以及与其他技术如 Spring 和 Struts2 的集成。这个压缩包中的 ChatRoom 文件很可能是实现了一个简单的聊天室应用,以此来...

    Ext 开发指南 学习资料

    把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2...

    最新ext3.0资源包 ext3.0

    在实际应用中,用户可能需要将这些资源包用于测试、学习或者升级旧的EXT2系统到EXT3,以体验和评估EXT3的性能和特性。使用前需要了解其适用场景和潜在风险,特别是在生产环境中,应当谨慎对待alpha版本的软件,以免...

    ext2.0学习文档 pdf

    根据提供的标题“ext2.0学习文档 pdf”和描述“ext2.0学习文档,很好用的哦。看了受益匪浅,所以上传大家一起分享”,我们可以推测这份文档是关于ext2文件系统的学习资料。接下来,我们将从给定的部分内容中提取并...

    Ext JS 3.2 学习指南

    《Ext JS 3.2 学习指南》是一本非常适合初学者入门及进阶的书籍,通过详细的讲解和丰富的示例,读者可以系统地学习Ext JS框架,并将其应用于实际的Web应用开发中。无论是对于想要快速上手的开发者还是希望深入了解...

    ext_教程 (ext 相 关)

    EXT学习文档是进一步深入EXT的重要资料。文档中可能涵盖了EXT的高级特性,如数据网格、图表、树形视图等复杂组件的使用,还有EXT的AJAX通信、状态管理和国际化支持等内容。此外,它可能还会介绍EXT的MVC(Model-View...

Global site tag (gtag.js) - Google Analytics