认识EXTJS

        以前做web项目,先是用的asp,然后是jsp,asp里用的控件都是.net里封装好的,很方便,不多说.做jsp页面时基本上用的就是html.也是在做jsp页面的时候对js和ajax开始了解.

        当时使用js和ajax是为了完成一些相对较复杂的验证或者界面效果.对js的感觉就是不好调试,功能效果强大.觉得整个页面都用js来写是多么的神奇.没想到这么快就看到了.

        现在在公司的界面真的全是js代码,基本上没有html的痕迹,用的是ExtJS框架,界面元素都是EXTJS组件.今天大概介绍一下EXTJS.

        EXT是基于Web的富客户端框架，完全是基于标准W3C(万维网联盟WorldWide Web Consortium)技术构建设的，使用到的都是最基本的HTML、CSS、DIV等相关技术。Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。

        Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

EXT基础:理解Html DOM、Ext Element及Component

        用EXT写的素有配置属性、事件、等等，其最终都会转化为HTML在浏览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。

        然后Ext在DOM的基础上，创建了ExtElement，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。可以让我们能更准确的操作DOM树.

        就像asp里控件,我们会觉得很方便,EXT也想到了,因此，除了Element以外，Ext还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。

        总结一下三者，组件Component是最高层次的抽象，是直接给用户使用的，Ext Element是Ext的底层API，主要是由Ext或自定义组件调用的，而DOM是W3C标准定义的原始API，Ext的Element通过操作DOM 来实现页面的效果显示。

EXT组件体系

        Ext在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。

        ExtJS 中的组件体系由框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext 的控件，Ext 组件是由Component类定义，每一种组件都有xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。

        组件大致可以分为三大类：基本组件、工具栏组件、表单及元素组件。组件功能很强大,一两句代码就是一个很好的显示效果.

举个代码例子吧

var panel=Ext.create('Ext.panel.Panel',{
       id:'myPanel',
       title:'第一个Panel应用',
       width:200,
       height:300,
       items:[
         {xtype:'textfield',fieldLabel:'用户名'},
         {xtype:'textfield',fieldLabel:'密码'}         
       ],
       tbar:[{xtype:'button',text:'按钮'}],
       tools:[{
                 type:'refresh', 
                 handler: function(event,toolEl,panel){
                 }
             }]
   });

        这段代码首先定义了panel控件,然后在控件里定义了两个text和一个按钮.items是panl的内容,tbar是工具条.其实整个代码就是一个配置的过程,配置的参数使用json数据的方式传给后台处理,后台根据Xtype的类型创建出相应的组件.

        其他控件就不多说,想了解的朋友可以下一份文档看看,很全很详细.

        在公司待了几个星期,对EXT的使用有了初步的了解,参照同事和文档写出想要的布局和一些控制效果等代码都差不多可以实现了.js代码最不好办的是调试,因为现在公司用的IDE对js代码的编写和调试不敏感,而js代码又有很多的标点,IDE又不报错，所以很难发现错误,还好现在可以使用firefox浏览器的firebug来实施断点调试,不然是真的抓不住虫.所以也向写js的朋友推荐firebug,确实不错.

 

        关于ExtJS的学习,下面这段话是从网上摘来的:

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

        觉得说的非常对,对新手来说,最忌自以为会了,其实自己开发还是不行,眼高手低是初学者的大忌,所以要想真正理解ext,用好ext,还得多看文档,多动手.