Ext Core 手册
2009.4.5-5.3
Ext Core 概述
简介
Ext Core 是一款具有多项功能的轻型 JavaScript 库,基于 MIT 许可为大家服
务。在 Ext Core 中有许多激赏的功能,在倡导快速 Web 开发的同时也本着高
质量、可伸缩性的代码的指导思想进行着。Core 库对 DOM 操作、Ajax、事件、
动画、模板、00 机制等的任务都有相应的支持。Core 库基于 MIT 方式发布,
无论是一般的动态页面和简单的应用程序都可选择使用。
下载
可在本页面下载,也可以到 Ext Core
主页面 查找最新的版本来下载。
引入 Ext Core
送到手上的 Ext Core 有调试的版本和供发布时的产品版本。产品版本已经作
压缩(就是消除空白符、硬回车和注释)和混淆的处理(所有局部变量重命名
为短的名称,使用 YUI Compressor)。在开发阶段,你应使用的是-debug 版
本,这样才会看到未混淆过的错误信息。
要引入 Ext Core 的开发版本,这样引入 JavaScript 文件就可以了:
<script src="ext-core-debug.js"></script>
要引入产品版本(压缩并且 gzipped 后 25kb),只需要省略掉“-debug”:
<script src="ext-core.js"></script>
完事!Ext Core 没有相关的 CSS 文件。
最简单的例子
完成 Ext Core 的加载之后,拿下面的代码测试一下是否正确加载了:
Ext.onReady(function() {
Ext.DomHelper.append(document.body, {tag: 'p', cls: 'some-class'});
Ext.select('p.some-class').update('Ext Core successfully injected');
});
关于
本手册的作者是 Tommy Maintz、Aaron Conran、James Donaghue、Jamie
Avins 与 Evan Trimboli。译者根据基于 GNU Free Documentation License
许
可的原版于 2009.4.5 初次释放版本来翻译,分设有简体中文和繁体中文(正
体中文,格式是 PDF)两种版本。维护以上两种中文的翻译版本的是 Ext 中文
站(ajaxjs.com),译者主要是 frank。文中许多部分取材于《Ext2.x
中文文
档》。鉴于《文档》是 frank 与南宫小骏等诸多 Ext 爱好者之合力,特此说明。
元素(Element)
获取元素(Getting Elements)
一份 HTML 文档通常由大量的装饰元素(markup)所组成。每当浏览器加载当
前的 html 文档,html 文档其中的每一个标签都被翻译为 HTMLElement 以构建
装饰树的文件对象模型(Document Object Model,DOM)。你可以在浏览器的
全局空间中找到一个称为 document 的变量,那个 document 就是 DOM 树的对象。
document 记忆了当页面加载完毕后而形成的每一份装饰元素引用。
document 对象有一个重要的方法 getElementById,允许在每个浏览中获取其
中的 HTMLElement
对象。然而,直接操纵 DOM 来说还有许多要注意的问题。
Ext Core 实现了 Ext.Element 类来封装(Wrap around)各浏览器不同
HTMLElement 的对象。
Ext.Element 占 Ext Core 库的篇幅很大,其中方法就占据了大部份。因此我
们将这些方法可分为下面几类:
• CSS 与样式(如 setStyle、addClass)
• DOM 查询或遍历(如 query、select、findParent)
• DOM 操控(如 createChild、remove)
• 方位、尺寸(如 getHeight、getWidth)
你可以使用 Ext.get 方法创建 Ext.Element 的实例,达到封装普通的
HTMLElement 之目的。例如你有已一个 id 名为“myElementId”的元素,便可
以这样获取:
var el = Ext.get('myElementId');
用 Firebug
执行以下代码后,观察 Ext.Element 身上的方法有哪些。有一点要
注意的就是,你正在观察的是普通 JavaScript 对象,我意思是说无所谓的
public 与 private 的方法,它们均有在此列出,若有疑问可参考 API 文档。
var el = Ext.get('myElementId');
console.dir(el);
console.dir
命令由 Firebug 提供,执行该可方便地列出某个对象身上有什么
成员,这都是例于开发者阅读的形式显示的。你换可以通过折叠某个子对象以
了解其牵连的属性。如图,属性显示是黑色的,方法/函数是绿色的,构造器
(constructors)或类(class)就是红色的。现在我对 id 为 myElementId 的
段落元素进行操作:
var el = Ext.get('myElementId');
el.addClass('error');
这段代码作用后段落的字体颜色就变为红色,页面的 CSS 规则有 error 的样式
类,属于 error 类的元素就会有红色效果:
.error {
color: red;
}
下一小节(CSS 类与样式)会简介关于处理元素的不同方式。
理解 Flyweight
享元模式( Flyweight Design Pattern ) 是一种节省内存的模式,该模式的大
概原理是建立单个全体对象然后不断反复使用它。
Ext 在启动的时候就创建了一个全局的 Ext.Element 对象专为 Flyweight 的设
计服务。这个全局的 Flyweight 实例可以为 Dom 里面任何一个节点保存引用。
要访问这种 Flyweight 的对象请使用 Ext.fly 方法。Ext 新手可能会因
Ext.get()与 Ext.fly()两者之间的用法而犯湖涂。
如果感觉这个 Ext.Element 元素是一直下去多次引用的,那么可以使用
Ext.get 方法;如果在一段时间内不需要存储元素的引用,那么就使整个库部
共享的对象 Flyweight 的 Ext.Element 对象。通过 Flyweight 访问元素,用
Ext.fly(/*元素 id*/)的方法。
再如上面那段落,我们撤销样式。
Ext.fly('myElementId').removeClass('error');
当执行这代码,Ext 就复用现有的享元对象,不一定要建立一个全新
Ext.Element 对象。fly 方法较适合单行的、一次性的原子操作(atomic
operation),就算你想将某个元素存储起来也是无效的,因为其它代码很有
机会改变对象。例如,我们看看下面的代码:
var el = Ext.fly('foo');
Ext.fly('bar').frame();
el.addClass('error');