理解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节点

和Jquery一样，Ext.Element对象是对dom对象的封装，目的是为了跨平台以及增加一些有用的方法。但是Ext.Element是不包含外观的，封装的dom原来是怎么样就是怎么样。开发中最好有现成的组件可以使用，否则Extjs和Jquery差别真的不大了。因此Ext在Element的基础上进一步封装，产生了Component类，这些类含有外观，也就是多加入了一些html之类的进去，更方便开发者使用。

 

依赖关系如下：

Component=>Element=>dom

因此在Component中可以通过el属性来访问该Component所依赖的Element，同样的，Element也可以通过dom属性来访问Element对象所依赖的dom。