EXTJS的工作总结

工作总结

   ExtJS是什么？在我进了公司之后我才开始听到这个名词，之前只是听说过JQuery，还没用过，甚至之前也只是偶尔修改下javascript，真正使用javascript还未曾试过。接触EXTJS后，我也开始对javascript慢慢地了解更多一些了。EXTJS给了我一种新的编程乐趣和编程方式，让我抛开了写HTML代码的界面，让我可以快速地布局出自己想要而且体验不错的界面！

什么是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来实现前端的酒店管理系统的时候，我就感觉这个界面非常友好和操作体验也很不错，操作简单，符合平常使用电脑的习惯。

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

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

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

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

　　再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，更甚至的是可以通过EXTJS自定义构造出自己的想要的拖拽，例如：“我需要从菜单树拖拽到panel生成相应的功能列表的panel”,这个在我们的产品中，我已经通过参考别人的在tree和grid之间拖拽以及在panel和panel之间的拖拽的实例来已经实现了在tree和panel之间的拖拽，同时我也通过这个拖拽实现的经验，也实现了在tree和toolbar之间的拖拽，这些功能实在太神奇了。

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

Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。该框架完全基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用！ExtJs支持多平台下的主流浏览器 Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+、Opera9+。

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对象实现。

例如：我在我们的产品中需要对toolbar快捷栏上的按钮进行右键删除功能时，EXTJS没有提供直接可以调用的实现方法，需要自己写，右键显示是一种浮动的菜单，由于按钮没有你可以抓得住的ContextMenu上下文菜单，并侦听contextMenu事件，所以我们必须要使用Extjs的getEL()来获得按钮的Element引用，使右键菜单在相应的坐标上显示，obj.el().getXY()，并实现对按钮的删除操作，el是Element类的简写，extjs中每个元素都被封装成对应的Element对象，以实现跨浏览器的兼容性，并提供更多扩展功能。

       二、熟悉ext组件体系

　　Ext2.0以上的版本对整个框架进行了重构，最为杰出的是推出了一个以Component类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。

三、掌握核心控件和熟悉EXTJS的各种基础属性、方法及事件

　　控件其实也是组件，比如用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel，还有代表应用程序窗口的Ext.Window等都属于Ext控件。在使用Ext的时候，一定要掌握一些核心控件，特别是处于基类的控件。比如上面提到的几个控件，他们都是继承于面板Panel，所以我们要重点掌握面板这个核心控件的特性。比如面板由以下几个部分组成：一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。只要掌握了Panel的应用，那么学习TreePanel、Window等就会变得简单得多。

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

多看EXTJS文档熟悉属性、方法及事件可以减少我们开发过程中不必要的麻烦，例如：在我们开发产品时，由于对EXTJS还不是完全摸透，总会走了一些冤枉路，本可以使用EXTJS中的属性、方法或事件就可以解决的问题，我们却找了一些无法解决问题的方法进行尝试，可能尝试成功了，可是对性能有影响了，或者说是解决的方法比较冗余了。例如：前两天我们在找一个时间格式为何通过EXT.AJAX.Request();异步提交方法来实现提交时间和使用纯Ajax的同步提交方法来实现提交时间时，两种方法在后台得到的时间格式不一样，而查询读取显示到日历控件上时，前者的时间格式可以在EXTJS的日历控件上正确显示数据，后者则无法兼容显示，我们尝试在网上找解决办法，可是没有好的解决办法，都是需要比较多的拆解步骤来重塑时间格式，这个方法感觉比较纠结和笨拙，找了很久都没有找到很好的解决方法，后来我一边找着一边想想才发现，想的方向错了，EXTJS的日历控件，时间格式的解决方法，应该还得从EXTJS出发来找解决方法。后来在文档中发现EXTJS有很多时间格式的转换！

四、学习及研究示例

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

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

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

２、                     在google中搜索出一些外国人写的实例，EXTJS在外国应用得比较多，实例也会写得比较精简和优化。

五、多运用

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

六、熟读Ext项目的源代码

　　如果要想深入应用Ext，那么阅读Ext项目的源代码这是必不可少的环节，Ext的代码质量非常高，通过阅读他的代码我们可以更加深刻的了解 javascript面向对象编程，Ext代码中包含了很多高级的js技巧以及设计模式。例如：我刚进公司的时候，一个星期后经理叫我看一个酒店管理系统的EXTJS项目和书本，同时通过对一些示例的模仿实践，使我很快就可以对EXTJS比较了解和开始应用。在使用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的掌握又是必须的。

 

EXTJS的发展前景

随着网络的发展，我们更希望的是我们能一打开一个浏览器，我们就可以什么都能做。所以说，我感觉随着技术的进步，我们的平常生活使用的操作系统会偏向web形式，web操作系统会慢慢地走向成熟。

ExtJS最大的优势在于它将Web应用程序的操作方式向传统桌面应用程序的操作方式进行转化甚至消除了这种差异，从根本上提高了用户的使用体验，这是ExtJS应用前景广阔的主要原因，其次使用ExtJS对浏览器没有任何要求可以说是一种绿色的富客户端实现方式，这是它应用前景广阔的第二个原因，另外ExtJS提供的各种组件可以用更加标准的方式展示数据降低了开发难度，这可以说是它应用前景广阔的第三点原因。

现在随网络的发展，现在推行的光纤入户和3G网络及4G网络的推行，面向web的应用开发需求会越来越多，现在很多的开发都是B/S的架构。前不久ExtJS,将现有的ExtJS整合JQTouch、Raphaël库，推出适用于最前沿Touch Web的Sencha Touch框架，该框架是世界上第一个基于HTML5的Mobile App框架。

HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。

我相信EXTJS，在未来好长一段时间都是一个不错的javascript的流行框架，随着HTML5的发展，EXTJS也会跟着基于HTML5的形成兼容HTML5的新框架。