ExtJS学习之路第二步：Ext.Component 和 Ext.dom.Element 的区别

让我们来初步的探讨下Ext.Component和Ext.Element的区别。

jQuery偏重于DOM元素的操作

1、每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。通常使用getElementById/Ext.getDOM获得DOM对象

举例：

<div id="myDiv" class="test">This is a test div.<p>I'm here!</p></div>

Ext.onReady(function() {
    var myDom=Ext.getDom("myDiv");
    Ext.Msg.alert("id",myDom.lastChild.tagName);
    document.getElementById("myDiv").lastChild.className="red";
});

如果你在Chrome里打端点，监视myDom就会发现

2、仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。jQuery是封装成jQuery对象，i.e: $(id)上面是各种方法....
因此，Ext在DOM的基础上，创建了Ext.dom.Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。通常使用Ext.get()获得Element对象

Ext.onReady(function() {
    var myDom=Ext.get("myDiv");
    myDom.slideOut('b', {
    easing: 'easeOut',
    duration: 500,
    useDisplay: true
    });
});

myDom就消失了，useDisplay：true最后添加上dispaly:none,否则就是visibility:hidden; b代表的是bottom,向下消失。这个就是Element上绑定的方法。

3、对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。例如：Panel面板,有标题，有内容，仅是用一个Element是不够的。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。--通常使用Ext.getCmp()获得Component对象。

直观认识Component

代码

var childPanel1 = Ext.create('Ext.panel.Panel', {
    title: 'Child Panel 1',
    html: 'A Panel'
});
var childPanel2 = Ext.create('Ext.panel.Panel', {
    title: 'Child Panel 2',
    html: 'Another Panel'
});
Ext.create('Ext.container.Viewport', {
    items: [ childPanel1, childPanel2 ]
});

你可以通过Ext.ComponentQuery.query('#myform textfield');也可以用ID,Ext.getCmp("myform")当然这两个获取的对象不一样了。

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

依赖关系如下： 
Component=>Element=>dom 
因此在Component中可以通过el属性来访问该Component所依赖的Element，同样的，Element也可以通过dom属性来访问Element对象所依赖的dom。比如你可以获取上面生成的childPanel1的ID，childPanel1.el.dom.id

这样对这个区别是否有大致的了解啦？

参考文献：

http://lixh1986.iteye.com/blog/1886963

http://docs.sencha.com/extjs/4.2.1/#!/guide/components