设计师 网站 贵,文章资讯类网站,合肥seo整站优化,免费建立自己的网页ExtJS是一种主要用于创建前端用户界面#xff0c;是一个与后台技术无关的前端ajax框架。
功能丰富#xff0c;无人能出其右
无论是界面之美#xff0c;还是功能之强#xff0c;ext的表格控件都高居榜首。
单选行#xff0c;多选行#xff0c;高亮显示选中的行#xf…ExtJS是一种主要用于创建前端用户界面是一个与后台技术无关的前端ajax框架。
功能丰富无人能出其右
无论是界面之美还是功能之强ext的表格控件都高居榜首。
单选行多选行高亮显示选中的行推拽改变列宽度按列排序这些基本功能咱们就不提了。
自动生成行号支持checkbox全选动态选择显示哪些列支持本地以及远程分页可以对单元格按照自己的想法进行渲染这些也算可以想到的功能。
再加上可编辑grid添加新行删除一或多行提示脏数据推拽改变grid大小grid之间推拽一或多行甚至可以在tree和grid之间进行拖拽啊这些功能实在太神奇了。更令人惊叹的是这些功能竟然都在ext表格控件里实现了。
呵呵~不过ext也不是万能的与fins的ecside比较ext不能锁定列土豆说1.x里支持锁定列但是2.0里没有了因为影响效率。也没有默认的统计功能也不支持excelpdf等导出数据。另外fins说通过测试ecside的效率明显优于ext呢。:)
什么是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组件轻松。
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、直至今日(2010年1月8日)ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户现在的版本为Ext-3.1.0
6、官方在2009年4月14-16日的首次Ext Conference中发布了Ext的3.0 RC版本。
7、2009年5月4日Ext的3.0 版本发布。
ExtJs UI Engine简介
ExtJs初期仅是对Yahoo! UI的对话框扩展后来逐渐有了自己的特色深受网友的喜爱。 发展至今 Ext除YUI外还支持Jquery、Prototype等的多种JS底层库让大家自由地选择。该框架完全基于纯Html/CSSJS技术提供丰富的跨浏览器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来包装任何DOMElement对象中添加了一系列快捷、简便的实用方法。
对于终端用户来说仅仅有Element是不够的比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此除了Element以外Ext 还建立了一系列的客户端界面组件Component我们在编程时只要使用这些组件Componet即可实现相关数据展示及交互等而 Component是较高层次的抽象每一个组件在渲染render的时候都会依次通过Element、DOM来生成最终的页面效果。
在使用Ext开发的应用程序中组件Component是最高层次的抽象是直接给用户使用的Ext Element是Ext的底层API主要是由Ext或自定义组件调用的而DOM是W3C标准定义的原始APIExt的Element通过操作DOM 来实现页面的效果显示。
在Ext中组件渲染以后可以通过访问组件的el属性来得到组件对应的Element通过访问Element的dom属性可以得到其下面的DOM对象。另外我们可以通过通过Ext类的快捷方法getCmp、get、getDom等方法来得组件Component、Ext元素Element及DOM节点。比如
var viewnew Ext.Viewport();//创建了一个组件Component
view.el.setOpacity(.5);//调用Element的setOpacity方法
view.el.dom.innerHTMLHello Ext;//通过Element的dom属性操作DOM对象
再看下面的代码
var winnew Ext.Window({id:win1,title:我的窗口,width:200,height:200});
win.show();
var cExt.getCmp(win1);//得到组件win
var eExt.get(win1);//根据id得到组件win相应的Element
var domExt.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的表单字段来说不管是ComboBoxNumberField、还是DateField他们其它都是 Ext.form.Field类的子类在他上面定义了表单字段的各种基本操作及特性。在学习使用表单字段组件时一定要重点研究Field这个类掌握他的主要方法、事件等就能有助于更好的学习使用其它的字段。
四、学习及研究示例
由于javascript语言非常灵活不像静态强类型语言比如Java那样有固定的代码设计模式而往往是不同的人就有不同的编程风格。在实际应用开发中只有见多识广才能在自己的在脑中建立一个开发库。
学习别人的示例对于我们开发帮助会非常大示例包括基本组件的应用、综合应用等多个方面。在此简单推荐几个。
、Ext官方示例在ext项目下载包的examples目录中包括各个控件的基本应用演示同时还有一些比较复杂的组合示例有简有繁非常适合初学者认真研究。
、Vifir推出的示例Vifir推出的一些示例主要包括两类一种是开源的示例应用另外一种是针对VIP用户的实用示例。开源的示例主要是指 wlr单用户blog系统这个一个集合了前后台技术的ext综合示例而针对VIP用户的实用示例则是可以作为开发骨架或扩展组件的示例。
、其它示例在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的掌握又是必须的。
资料来源http://baike.baidu.com/view/1350145.htm
