简译：Ext-Core 3.0 使用手册部分1 （09-05-21）

完整英文版本

抛砖引玉吧，现在还没有中文版本出现

引言：

Winston Churchill ： “We make a living by what we get, but we make a life by what we give.”。

丘吉尔说过：“我们靠所得来谋生，但却是靠给予来创造生活。” Extjs作为开源社区的一员，将继续奉献，这次发布的ext-core3.0 采用 宽松的mit授权，对所有人完全免费。

介绍：

 

Ext core 是一个轻量级的特性丰富的javascript库，ext-core的丰富特性可以使得web开发具有良好的设计和可扩展性。
ext-core支持dom操作和遍历，ajax，事件和自定义事件，动画，模版，面向对象机制等等。
ext-core基于mit授权，对于网页和小的网络应用十分完美。

下载地址
最新消息地址

包含ext-core
ext-core有调试版本ext-core-debug.js以及利用YUI Compressor压缩的产品版本ext-core.js。

如果在开发阶段：

<script src="ext-core-debug.js"></script>

 

在产品实用阶段（gzip后大小25k）

<script src="ext-core.js"></script>

 

简单示例：
在你的页面包含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');
});

 

关于本文档：

ext-core文档由Tommy Maintz, Aaron Conran, James Donaghue, Jamie Avins & Evan Trimboli编写，
授权方式为GNU FDL

 

Copyright (C)  2009  Ext JS, LLC.
    Permission is granted to copy, distribute and/or modify this document
    under the terms of the GNU Free Documentation License, Version 1.3
    or any later version published by the Free Software Foundation;
    with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
    A copy of the license is included in the section entitled "GNU
    Free Documentation License".

 

Ext.Element 入门

一个网页文档包括很多html代码，当浏览器载入网页文档时，你的html代码的每个标签都被转换成HTMLElement ，并且浏览器建立了一个DOM 树，这棵dom树被保存在浏览器的全局空间document变量中，这个变量包含指向每一个dom树节点的引用。

DOM提供了方法getElementById ，它允许你获得dom树中的某一节点，各个浏览器对于dom操作有很多差异，ext-core实现了一个类Ext.Element，能够为你提供跨浏览器的dom操作支持。

Ext.Element 是库中含有最多方法的类 ，可以把它的方法分类为：

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实例是如何封装底层的HTMLElement的，

var el = Ext.get('myElementId');
console.dir(el);

 

console.dir 是firebug提供的可以看到对象里的所有属性，方法，并且允许你对某些属性的折叠和扩展操作。属性为黑色显示，方法为绿色显示，构造函数（类）为红色显示。

让我们和图中的myElementId交互一下

var el = Ext.get('myElementId');
el.addClass('error');

 

执行完这个代码后，段落的字体颜色就变成红色了，这个页面包含了条样式规则，它把所有具有class为error的元素的字体都变成红色，该条样式规则为:

.error {
    color: red;
}

 

下面的一节 css样式操作 将会介绍更多的操纵元素样式的方法。

介绍 享元：

享元模式 是指创造一个全局对象，并且频繁的重用它。当extjs载入后构造了一个全局对象（Ext.Element的实例），这个对象可以用来表示对任何底层dom节点的封装，如果要访问这个全局对象，你可以调用 Ext.fly 方法，extjs新手总是会对何时调用Ext.get或Ext.fly 产生疑惑。

如果需要保存一个Ext.Element的实例的引用后期使用，那么用Ext.get方法。有时你不需要存储这个引用，那么你可以使用全局共享的Ext.Element实例，要访问这个实例，使用Ext.fly(elementId)。

让我们将样式类error从刚才那个段落中移去：

Ext.fly('myElementId').removeClass('error');

 

当这段代码被执行时，ext使用共享的实例而并不需要创建一个崭新的Ext.Element。fly方法适合执行一条原子性操作的代码 ，你不要想着去存储这个全局共享对象的引用，因为它会被后面的代码改变的，例如下列代码：

var el = Ext.fly('foo');
Ext.fly('bar').frame();
el.addClass('error');

 

frame 是一种高亮效果，属于特效库的一部分，那么你认为这个结果会是什么样子？

答案是id为bar的元素会有frame的效果，紧接着样式类error的效果也会附加在它上面。id为foo的元素从头到尾都没有任何变化，因为当我们在bar上运用frame特效时，指向全局共享对象的el已经被改变了。

如果你不想这样并且仍然希望使用Ext.fly方法，那么重新读一下上面关于享元的适用范围

评论

4 楼 yiminghe 2009-05-31  

ddden 写道

我翻译了。http://ddden.cn/ext/3/core/manual/

好啊，玉出来了

3 楼 天机老人 2009-05-31  

哥们保持！

2 楼 ddden 2009-05-31  

我翻译了。http://ddden.cn/ext/3/core/manual/

1 楼 you 2009-05-23  

good work！