没有合适的资源?快使用搜索试试~ 我知道了~
Ext Core手册(汉化版)
需积分: 10 0 下载量 192 浏览量
2012-10-21
18:07:13
上传
评论
收藏 532KB PDF 举报
温馨提示
试读
43页
Ext Core手册(汉化版),Ext核心说明文档,初学者的最佳学习助手
资源详情
资源评论
资源推荐
Ext Core 手册
2009.4.5-5.3
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 的方法,它们均有在此列出,
若有疑问可参考 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');
frame()是 Ext.Element 包中的动画方法,产生高亮的效果,你可以估计一下,有什么现象出现?
答案是 id 为 bar 的那个元素会产生 frame 效果随后立即应用上 error 的 CSS 样式效果,那 foo id 的
元素可什么事情都没有发生,这是由于指向 Flyweight 对象的 el 引用已经被产生过 frame 效果的所
使用。
el 就是 bar 元素,这是关于 Flyweight 享元用法的重要内容,如果你想搞清楚 Ext.fly 方法的用途适
宜再看看这部份的内容。
Ext.get
Ext.get()可接收这几种类型的参数,如 HTMLElement,Ext.Element、字符型,返回的新实例。以
下三种类型如下例:
var el1 = Ext.get('elId'); // 接收元素 id
var el2 = Ext.get(el1); // 接受 Ext.Element
var el3 = Ext.get(el1.dom); //接受 HTMLElement
Ext.fly
Ext.fly 在参数方面与 Ext.get 的完全相同,但其内置控制返回 Ext.Element 的方法就完全不同,
Ext.fly 从不保 存享元对象的引用,每次调用方法都返回独立的享元对象。其实区别在于“缓存”
中,因为缓存的缘故,Ext.get 需要为每个元素保存其引用,就形成了缓 存,如果有相同的调用
就返回,但 Ext.fly 没有所谓的缓存机制,得到什么就返回什么,不是多次使用的情况下“一次性
地”使用该元素就应该使用 Ext.fly(例如执行单项的任务)。
使用 Ext.fly 的例子:
// 引用该元素一次即可,搞掂了就完工
Ext.fly('elId').hide();
Ext.getDom
送入 String (id)、dom 节点和 Ext.Element 的参数,Ext.getDom 只会返回一个普通的 dom 节点。如
下例:
// 依据 id 来查 dom 节点
var elDom = Ext.getDom('elId');
// 依据 dom 节点来查 dom 节点
var elDom1 = Ext.getDom(elDom);
// 如果我们不了解 Ext.Element 是什么直接用 Ext.getDom 返回旧的 dom 节点好了
function(el){
var dom = Ext.getDom(el);
// 接下来干些事情……
}
CSS 样式
通过学习 markup 装饰部分,我们已经晓得,装饰与 document 的紧密联系下如何透过 Ext Core 较
简便地取得数据。但进行 document 的布局又如何编排呢?是不是有一种方法可以控制布局也可以
控制 document 的样式呢?答案便是用 Cascading Style Sheets (CSS)处理。CSS 正是用来页面可视
化信息和布局的语言。Ext Core 在方面真的是让我们用户感觉好使好用,易如反掌,——直接修
改它就行了。
<style type="text/css">
myCls {
color: #F00;
}
</style>
...
<div type="myCls">您好!</div>
上一例中我们赋予 div 元素“您好”的文本和让其颜色为红色(#F00)。
我们已经晓得 Firebug,可以为我们带来页面开发上的种种便利。凡页面中的任意一元素上面右击,
选择“Inspect Element”(检测元素),弹出 Firebug 可以观察到 dom 树中真实情况,该元素是定
义在哪里的。Dom 树右边的面板就是对应该元素身上的样式。
如果你未曾熟悉 Firebug 的话,暂时放下这块建议先学习一下它。它仿佛就是 Web 开发的高级示
波器!心血来潮地修改站点的样式抑或是调试站点的样式,“Inspect Element”功能都贡献殊大。
回到 Ext 中,我们看看 Ext Core 中有哪些方法是为修改 CSS 所服务的。
• addClass
轻松地为一个元素添加样式:
Ext.fly('elId').addClass('myCls');
// 加入元素的'myCls'的样式
• radioClass
添加一个或多个 className 到这个元素,并移除其所有侧边(siblings)节点上的同名样式。
//为元素添加'myCls'在所有侧边元素上删除'myCls'样式
// all sibilings.
Ext.fly('elId').radioClass('myCls');
剩余42页未读,继续阅读
developerinit
- 粉丝: 52
- 资源: 5
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0