初识Ext--铺垫及进门

        既然是初识Ext，就先来说说页面的构成。一个网页我们在前端最长看到的无非是html、css和js，我觉得可以这样理解，html构建了一个人的骨架（DOM Tree），而css则是对这个骨架进行装饰，让其变得可以一见钟情，而js则是大脑，控制着这个人怎样去行动，体现出一个人的内涵。Ext则是将这三者融合在了一起，但并不是一个完整的人，而是把四肢等各个部分分开，由我们按照需要组装，以消耗最少的资源来完成需要完成的工作。

       我们知道，HTML文档中的每一个标签都被翻译为HTMLElement，Ext实现了Ext.Element 这一个类来封装HTMLElement 的对象，可以人为Ext.Element是HTMLElement 的代替物，其目的在于为各个不同的HTMLElement 进行统一化封装和加强。Element对象提供了高速缓存机制，访问DOM元素首先从缓存中查找，在多次访问同一对象上有明显的优势。

       以前在js中获取页面元素是通过document，也就是DOM树的对象，它记忆了当页面加载完毕后形成的每一个装饰元素引用，用的最多的方法可能是getElementById( )、getElementsByName( )、getElementsByTagName( )，但是上面讲了那么多Element ，所以为了体现其价值，前面提到的这几种方法可以被抛弃了。取而代之的是Ext.get( )和Ext.fly( )方法，调用这两个方法返回的就是Ext.Element实例对象，注意不是普通的HTML DOM元素哦，如果写全大家就会记住，那就是Ext.Element.get( )，不过一般都是写成前面的简写形式。如果真的那么想得到DOM元素，可以用Ext.getDom( )。上面三个方法都要一个参数，一般是某个标签的id。

       有人可能会疑惑为什么有Ext.get( )，还要有Ext.fly( )，下面就告诉你，他俩本质的区别就是Ext.fly( )不会缓存任何的元素，而Ext.get( )则会为每个DOM元素建立一个新的Ext.Element 对象，如果获取相同对象的话，则只是从缓存中提取。举个简单的例子：

var el = Ext.fly('one');
Ext.fly('two').frame();
el.addClass('error');

上面代码执行后，会给id为‘two’的元素加上‘error’的css样式。其实还有很多方法可以获得周边节点，由于本人用的不多，就不在这胡扯了，有兴趣可以自己看看。

       下面来说一下元素的其他比较高级那么一点点的查询方式，那就是DomQuery，其作用就是通过CSS选择符选取目标节点元素，若找不到就返回null值。如果想返回多个元素的集合，我们就可以用DomQuery类中的select( )和query( )方法。由于使用频率高，Ext直接将其挂到Ext这个命名空间下，省去每次Ext.DomQuery.select( )/Ext.DomQuery.query()冗长的调用方式。两个方法的区别在返回类型上，query( )返回的是JavaScript标准的数组类型；select( )返回的是CompositeElement类型（元素集合对象），CompositeElement在Ext中用于表示元素的集合中无论有多少个元素，均被视为一个单独元素处理，用法和单个的Element对象一样。如下面例子所示：

var els = Ext.select('.title');
els.addClass('error');

上面代码的作用是为所有class为title的元素加上error样式。还可以在某个范围中搜索元素，还有其他方法看下例子就懂了。

HTML代码
<div id="accordion">
    <div id="first" class="title">A</div>
    <div id="second" class="noMatch">B</div>
    <div id="third" class="title other">C</div>
</div>

Ext代码
var accordion=Ext.get('accordion');
accrodion = accordion.select('.title')//在accordion元素下的范围找
var firstItem = accordion.item(0);//获得第一个div，类型为Ext.Element
alert(accordion.indexOf('third'))//该元素位置，结果为1
alert(accordion.getCount());//集合元素数量，结果为2