ExtJs-初步学习

最近在系统学习Extjs框架，从刚一开始接触Extjs到现在发现对Extjs越来越喜欢了。刚开始只是想在页面上实现一个展示大量图片的功能，就像在线订餐系统展示菜单的效果那样，每幅图片上都有一些必要的信息、动作、链接等。效果如下图：

这样的实现功能其实就是图片及信息重复显示，刚开始本想借助像asp.net中repeater那样的服务器控件来达到一个模板绑定信息重复显示的功能，利用这样的控件还可以起到分页的效果。后来发现这样实现的可能性很小，因为一幅图片加上要显示的信息太多了，更何况还要做出那样美观（主要是布局和信息显示方式）的效果所以就得依靠大量的div来实现，而重点就在于如何把数据绑定到div或div中的控件中，最后发现用这样的服务器控件是行不通的。所以后来就开始考虑有没有像jqueryUI那样的框架可以实现这样的功能，当然这样第一个想到的就是jqueryUI，用jqueryUI来实现图片的大量显示没有问题而且效果还是不错的，因为jqueryUI这样的功能的实现完全靠的是ajax异步与服务器数据交互方式，这样还解决了初始加载页面缓慢的问题。

对JqueryUI框架的一些认识

但后来深入的研究后发现用jqueryUI来实现这样的功能还是有难度的，首先jqueryUI的主要用法就是在页面中把所有需要的标签或控件都在web页面中提前编辑好然后引入相应的js库，然后利用ajax技术或其他方法向后台请求数据，最后就是JqueryUI中的js控制服务器返回的数据显示到web页面上。其实像JqueryUI这样的实现的方法的确挺好的，web页面上负责显示数据信息，而jqueryUI中封装的那些js控制对数据的请求和显示方式（也可以称作一系列的动作），然而jqueryUI的控制层（js库）都是封装好的，也就是说我们可以利用JqueryUI来开发一个实现某一个独立功能的小插件例如日历、下拉框等等。但是如果我们想在原来的插件上继续丰富这些插件的功能就有些难度了，因为每个插件的都对应着一个独立的js（控制层），想在插件与插件之间建立一些联系或互动还是有难度的。所以说jqueryUI用起来相当的简单也容易上手，其关键点就是控制层（jqueryUI的javascript库）已经封装好，当我们用的时候只需要在页面上将对应的标签控件写好，然后按照jqueryUI提供的请求数据的接口去请求获取数据就行。但也就是因为这个原因我们只能按照他的接口去请求相应的数据，其它的方面像数据的显示方式和添加一些额外的动作等这样的功能是很难实现扩展的。

直到后来接触到了Extjs，发现Extjs的功能太强大了，实现这样的功能实在是太简单了。首先Extjs最突出、最强大的功能是表格功能的实现，而上述功能的实现也基本上就是靠的表格数据处理而且还可以实现分页的效果，基于这个原因对Extjs的第一印象是相当不错的。

对web前台开发的新认识

后来随着研究的深入发现Extjs的效果越来使人震惊，甚至改变了我对javascript的一些看法。从接触javascript以来一直以为javascript作为一个脚本语言，只是简单的配合实现一些动作、特效达到动态网页的效果，接触了Extjs后才发现原来javascript的功能是如此的强悍。首先没接触Extjs之前一直以为web前台开发只是在页面中添加一些客户端控件或服务器控件，最多就是利用div+css+javascript来控制布局和页面的美化。直到后来接触到了Extjs的mvc开发模式之后，发现原来web前台开发还可以这样，蓦然回首发现以前的开发方式太散乱了，完全就是需要什么就加什么代码，尤其是javascript代码。这样的项目开发完成之后发现这一个javascript函数那一个javascript文件,复用的难度大不说，维护和实现功能的扩展更是难上加难！

Extjs强大的UI库及设计理念

Extjs实现了form表单所需要的所有控件，而且界面美观，代码易复用。可以说Extjs功能丰富，无人能出其右.无论是界面之美，还是功能之强，ext的表格控件都高居榜首。单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功都是基本功能。自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。

ExtJS可以用来开发RIA也即富客户端的AJAX应用，基于javascript脚本语言，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

单页面程序

到后来接触到Extjs的one page one application的理念，更是令人大开眼界。所谓one page one application就是用一个网页来实现一个应用的所有功能。以前没接触过Extjs这样的框架，想实现一个B/S结构的系统靠一个网页怎么可能呢？Extjs让我信了，Extjs的开发方式和他强大的UI组件库完全可以实现这样效果。One page one application 使得在进行业务操作的时候，url的变化表现在一个框架页面内，从浏览器的地址看起来，只有一个地址。甚至，一些应用干脆弹出一个去掉了浏览器菜单、工具条、地址栏、状态栏的窗口，连地址都看不见。因此，一个页面就是一个应用，从用户的角度来说，对于操作型系统，是一种非常自然的体现。这样的效果看起来完全就跟c/s效果一样。

小结

Extjs的学习还在继续，不过最开始接触Extjs的时候犹豫过，总是在考虑这样的问题，像Extjs这样的web前端框架值不值得学，又或者Jquery+jqueryUI与Extjs之间到底选择哪一个。基于这样的问题查了很多的资料，一直在拿jqueryUI与Extjs进行对比，找他们各自的优点、缺点。后来才发现原来对Extjs的学习已经深入，发现最初的哪些顾虑都是错误的想法，因为不管是Jquery还是Extjs他们之所以能称得上是框架，就必然由他们各自的优势。当然所有的东西有它的优点也就必然存在缺陷，不能因为一些缺点就否认了他的优点，更何况Extjs不是还可以兼容Jquery吗？

作者: 周响
原文: http://blog.csdn.net/leimengyuanlian/article/details/18215999