Ext第1章.docVIP

第一部分 Ext Core 第1章 Ext Core重要概念 在经历了一年多的等待，Ext官方出人意料地推出了一个只有25KB大小的Ext Core 3，此举说明Ext官方已不满足于使用Ext构建Web应用平台，还要在Web 2.0网站开发中与jQuery一较高低。 Ext Core为了实现轻量化，将Ext中的UI部分和与之相关的数据处理部分都剔除了，只保留了DOM操作和遍历、Ajax、事件处理（包括自定义事件）、动画、模板、面向对象机制等内容。本章将重点讲解Ext Core的核心功能。 1.1 Ext.Element 在一个网页文档里包含了许多HTML标签，而这些HTML标签在DOM树中会转换成一个个的HTMLElement，从而便于脚本引用。 由于浏览器DOM操作的差异，为了实现Web框架的跨浏览器特性，每个框架都会构建一个新类，用来操作和遍历DOM树，而在Ext框架中实现该功能的类就是Ext.Element。 Ext.Element类是Ext Core库中方法最多的类，其主要方法大致可归纳为以下几类： l CSS样式操作（例如：setStyle、addClass）。 l DOM查询与遍历（例如：query、select、findParent）。 l DOM操作（例如：createChild、remove）。 l 尺寸大小操作（例如：getHeight、getWidth）。 下面几小节将简要介绍Ext.Element类的使用和方法。 1.1.1 获取HTMLElement节点的Ext.Element实例 在Ext中，可通过Ext.get方法正获取HTMLElement节点的Ext.Element实例，其语法如下面的代码所示，其中myElementId为HTMLElement的id属性。 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标签，但因为第2行已经修改了全局共享实例，el变量的对象已经变为“id2”的Ext.Element实例，所以运行第3行时，并不能隐藏“id1”。 为什么有了Ext.get方法，还要增加一个Ext.fly方法呢？主要是为了减少内存的使用。试想一下，当创建一个DOM节点的Ext.Element实例时，就需要为其分配内存，如果页面需要操作许多的DOM节点时，内存开销就很大了。 在实际应用中，很多时候只是对某个节点执行一次性的操作，譬如修改节点的样式，这时候，如果使用全局共享的Ext.Element实例，就不用创建Ext.Element实例，从而节省内存的开销。 如果你只想返回HTMLElement对象，可使用Ext.getDom方法，其语法如下面的代码所示。 var el=Ext.getDom(el); //el可以为节点id、DOM节点或已存在的Element 很多开发者在使用Ext.Element操作DOM节点本身的属性和方法时，经常会写以下这样的代码： var el=Ext.get(elId); el.innerHTML=Test; 造成这种错误的原因是：把Ext.Element对象当成了HTMLElement对象，正确的写法如下： var el=Ext.get(elId); el.dom.innerHTML=Test; 1.1.2 CSS样式操作 Ext.Element提供了11种操作样式方法，下面将介绍这些方法的功能和使用方法。 l addClass：为element增加样式类，其使用方法如下面代码所示。 //只增加一个样式类 Ext.fly(elId).addClass(elCss); //增加多个样式类 Ext.fly(elId).addClass([elCss1, elCss2,