Ext Core核心功能介绍（上）

Ext Core为了实现轻量化，将Ext中的UI部分和与之相关的数据处理部分剔除了，只保留了DOM操作和遍历、Ajax、事件处理、动画、模板、面向对象机制等内容。

1 Ext.Element

在一个网页文档里包含了许多HTML标签，而这些HTML标签在DOM树中会变成以改革HTMLElement，从而便于脚本的引用。

由于浏览器DOM操作的差异，为了实现Web框架的跨浏览器特性，每个框架都会构建一个新类，用来操作和遍历DOM树，而在Ext框架中实现该功能的类就是Ext.Element。

Ext.Element类主要方法大致可归纳为以下几点：

• CSS样式操作
• DOM查询与遍历（例如：query,select,findParent）
• DOM操作（例如：createChild,remove）
• 尺寸大小操作（例如：getHeight,getWidth）

1.1 获取HTMLElement节点的Ext.Element实例

在Ext中，可以通过Ext.get方法获取HTMLElement节点的Ext.Element实例，其语法如下：

var el=Ext.get(el);  //el可以为节点id,DOM节点或已存在的Element

使用Ext.get会创建一个Ext.Element的实例，并可在后期引用时使用。如果不需要创建这个实例，只是对HTMLElement执行一次性的操作，那么可以使用Ext.fly方法。Ext.fly方法并不创建Ext.Element实例，只是利用全局共享的Ext.Element实例进行操作，其语法如下：

Ext.fly(el).getHeight(); //el可以为节点id、DOM节点

如果要将Ext.Element实例赋值给一个变量，然后在后续代码中引用，一定要使用Ext.get方法，不要使用Ext.fly方法。因为全局共享的Ext.Element实例有可能被后续代码修改，最终得不到想要的结果，例如：

var el=Ext.fly("id1");
Ext.fly("id2").hide();
el.hide();

上面的代码本来是要隐藏id为"id1"和"id2"的HTML标签，但是第二行已经修改了全局共享实例，el变量的对象已经变成"id2"，所以运行第3行时，并不能隐藏"id1"。

Ext.fly方法主要是为了减少内存的使用。

如果只想返回HTMLElement对象，可使用Ext.getDom方法，语法格式如下：

var el=Ext.getDom(el); //el可以为节点id，DOM节点或已经存在的Element

在使用Ext.Element操作DOM节点本身的属性和方法时，下面的写法是错误的，造成这样错误的原因是吧Ext.Element对象当成了THMLElement对象

var el=Ext.get("elId");
el.innerHTML="Hello world";

正确的写法是：

var el=Ext.get("elId");
el.dom.innerHTML="Hello world";