日期:2014-05-16 浏览次数:20310 次
Ext?Core概述
简介
Ext?Core是一款具有多项功能的轻型JavaScript库,基于MIT许可为大家服务。在Ext?Core中有许多激赏的功能,在倡导快速Web开发的同时也本着高质量、可伸缩性的代码的指导思想进行着。Core库对DOM操作、Ajax、事件、动画、模板、00机制等的任务都有相应的支持。Core库基于MIT方式发布,无论是一般的动态页面和简单的应用程序都可选择使用。
下载?
可在本页面下载,也可以到Ext?Core主页面查找最新的版本来下载。本手册之PDF下载的完整版本,请转到这个地址。
引入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是主要译者。文中许多部分取材于《Ext?3.x中文文档》。鉴于《文档》是frank与南宫小骏、善祥等诸多Ext爱好者之合力,特此说明。翻译若有不足之处,请立即联系我们。另提供PDF下载的完整版本,请转到这个地址。
元素(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的方法,它