ExtJS 惯用

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');
removeClass?
移除元素身上一个或多个的CSS类。?
Ext.fly('elId').removeClass('myCls');?//?移除元素的样式
toggleClass?
轮换（Toggles，两种状态中转换到一个状态）--添加或移除指定的CSS类（如果已经存在的话便删除，否则就是新增加）。?
Ext.fly('elId').toggleClass('myCls');?//?加入样式
Ext.fly('elId').toggleClass('myCls');?//?移除样式
Ext.fly('elId').toggleClass('myCls');?//?再加入样式
hasClass?
检查某个CSS类是否作用于这个元素身上。?
if?(Ext.fly('elId').hasClass('myCls'))?{
????//?是有样式的……
}
replaceClass?
在这个元素身上替换CSS类。?
Ext.fly('elId').replaceClass('myClsA',?'myClsB');
getStyle?
返回该元素的统一化当前样式和计算样式。?
var?color?=?Ext.fly('elId').getStyle('color');
var?zIndx?=?Ext.fly('elId').getStyle('z-index');

var?fntFmly?=?Ext.fly('elId').getStyle('font-family');
//?...?等等
setStyle?
设置元素的样式，也可以用一个对象参数包含多个样式。?
Ext.fly('elId').setStyle('color',?'#FFFFFF');
Ext.fly('elId').setStyle('z-index',?10);
Ext.fly('elId').setStyle({
????display?:?'block',
????overflow?:?'hidden',
????cursor?:?'pointer'

});
//?带有动画的变换过程
Ext.fly('elId').setStyle('color',?'#FFFFFF',?true);
//?带有0.75秒动画的变换过程
Ext.fly('elId').setStyle('color',?'#FFFFFF',?{duration:?.75});?

//?...?等等
getColor?
为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。?
Ext.fly('elId').getColor('background-color');
Ext.fly('elId').getColor('color');
Ext.fly('elId').getColor('border-color');

//?...?等等
setOpacity?
设置元素的透明度。?
Ext.fly('elId').setOpacity(.5);
Ext.fly('elId').setOpacity(.45,?true);?//
????动画

//?附有半秒的动画过程
Ext.fly('elId').setOpacity(.45,?{duration:?.5});
clearOpacity?
清除这个元素的透明度设置。?
Ext.fly('elId').clearOpacity();
Dom游历
已知某个位置，我们要其附近位置的dom树中游历，是一件经常性的任务。Ext?Core里面就有这样跨浏览器的方法，允许我们在dom之中穿梭自如。再一次，CSS进入了我们的视野，使得干起复杂的任务时没那么痛苦。基于CSS3的选择符（选择器）在方面也尤其地干练！

拿以下的装饰做示范：

<style?type="text/css">

????.red?{
????????color:?#F00;
????}
</style>????
...
<div?id='elId'>
????<ul>
????????<li>a-one</li>

????????<li>a-two</li>
????????<li>a-three</li>
????????<li>a-four</li>

????</ul>
????<ul>
????????<li>b-one</li>
????????<li>b-two</li>

????????<li>b-three</li>????????????????
????</ul>
</div>
这是一堆列表元素，要让其中的偶数行变红色。要如此优雅地实现该功能，Ext不是没有，键入命令如下：

Ext.fly('elId').select('li:nth-child(2n)').addClass('red');
结果如下：


我们已见识过游历DOM方面，依靠Ext?Core所带来的强大威力，――类似还有更多的，看看：

is?
测试当前元素是否与传入的选择符相符一致。?
var?el?=?Ext.get('elId');
if?(el.is('p.myCls'))?{
????//?条件成立

}
findParent?
定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合并匹配传入的简易选择符。?
Ext.fly('elId').findParent('div');?//?返回dom节点

Ext.fly('elId').findParent('div',?4);?//?查找4个节点
Ext.fly('elId').findParent('div',?null,?true);?//?返回Ext.Element
findParentNode?
定位于此节点的“父节点”，以此节点的“父节点”为起点，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。?
Ext.fly('elId').findParentNode('div');
up?
沿着DOM，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。?
Ext.fly('elId').up('div');
Ext.fly('elId').up('div',?5);?//?限5层的内查找
select?
传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成期待匹配子节点的集合，也就是“选择”的操作，最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document可是搜索。
//?返回结果的CompositeElement
Ext.fly('elId').select('div:nth-child(2)');
//?返回数组
Ext.fly('elId').select('div:nth-child(2)',
????true);

//?整个document都会搜索
Ext.select('div:nth-child(2)');
query?
进行一次query的查询，返回DOM?节点组成的数组。可选地第二参数设置为查询的起点，如不指定则为?document。?
//?返回dom节点组成的数组
Ext.query('div:nth-child(2)');?
child?
基于送入的选择符，不限定深度进行搜索，符合的话选取单个子节点。?
Ext.fly('elId').child('p.highlight');??//?返回的类型是Ext.Element

Ext.fly('elId').child('p.highlight',?true);??//?返回dom节点
down?
基于该选择符，"直接"选取单个子节点。?
Ext.fly('elId').down('span');??//?返回的类型是Ext.Element
Ext.fly('elId').down('span',?true);??//?返回dom节点
parent?
返回当前节点的那个父节点，可选地可送入一个期待的选择符。?
//?返回父节点，类型是Ext.Element
Ext.fly('elId').parent();??
//?返回父节点，类型是html?dom
Ext.fly('elId').parent("",?true);

//?返回父级节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('elId').parent("div");
next?
获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。?
//?返回下一个侧边节点，类型是Ext.Element
Ext.fly('elId').next();
//?返回下一个侧边节点，类型是html?dom
Ext.fly('elId').next("",?true);
//?返回下一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('elId').next("div");
prev?
获取上一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。?
//?返回上一个侧边节点，类型是Ext.Element
Ext.fly('elId').prev();
//?返回上一个侧边节点，类型是html?dom
Ext.fly('elId').prev("",?true);
//?返回上一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('elId').prev("div");
first?
获取第一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。?
//?返回第一个侧边节点，类型是Ext.Element
Ext.fly('elId').first();
//?返回第一个侧边节点，类型是html?dom
Ext.fly('elId').first("",?true);
//?返回第一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('elId').first("div");
last?
获取最后一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。?
//?返回最后一个侧边节点，类型是Ext.Element
Ext.fly('elId').last();
//?返回最后一个侧边节点，类型是html?dom
Ext.fly('elId').last("",?true);
//?返回最后一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('elId').last("div");
DOM操控
DHTML常见的一项任务就是DOM元素的增、删、改、查。鉴于不同浏览器的差别很大，搞起来会很麻烦，ExtCore就设计了一个抽离不同浏览器之间差异的API，并考虑了执行速度方面的优化。我们可以轻松地围绕DOM树做增、删、改、查的任务。先观察一下这装饰元素：

<div?id='elId'>
????<p>paragraph?one</p>
????<p>paragraph?two</p>

????<p>paragraph?three</p>
</div>
渲染出来这样：

?
这时我们为其加入一个子节点“elId”：

Ext.fly('elId').insertFirst({
????tag:?'p',
????html:?'Hi!?I?am?the?new?first?child.'

});
插入后是这样：


小菜一碟吧！？我们再操练一下Ext?Core强大的API功能：

appendChild?
把送入的元素归为这个元素的子元素。?
var?el?=?Ext.get('elId1');
//?用id指定
Ext.fly('elId').appendChild('elId2');
//?Ext.Element添加
Ext.fly('elId').appendChild(el);
//?选择符组合地添加
Ext.fly('elId').appendChild(['elId2','elId3']);
//?直接添加dom节点
Ext.fly('elId').appendChild(el.dom);

//?添加CompositeElement，一组的div
Ext.fly('elId').appendChild(Ext.select('div'));??
appendTo?
把这个元素添加到送入的元素里面。?
var?el?=?Ext.get('elId1');????
//?'elId'添加到'elId2'里面
Ext.fly('elId').appendTo('elId2');?
Ext.fly('elId').appendTo(el);??//
????添加到Ext.Element?el
insertBefore?
传入一个元素的参数，将其放置在当前元素之前的位置。?
var?el?=?Ext.get('elId1');????

//?dom节点在前面插入
Ext.fly('elId').insertBefore('elId2');
//Ext.Element?el在前面插入
Ext.fly('elId').insertBefore(el);
insertAfter?
传入一个元素的参数，将其放置在当前元素之后的位置。?
var?el?=?Ext.get('elId1');????

//?dom节点在后面插入
Ext.fly('elId').insertAfter('elId2');
//?Ext.Element?el在后面插入

Ext.fly('elId').insertAfter(el);
insertFirst?
可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“DomHelper配置项对象”作为参数传入），总之，这个元素作为当前元素的第一个子元素出现。?
var?el?=?Ext.get('elId1');????


//?插入的dom节点作为第一个元素
Ext.fly('elId').insertFirst('elId2');??
//?插入的Ext.Element作为第一个元素
Ext.fly('elId').insertFirst(el);
????????
//?用DomHelper配置项创建新节点，新节点会作为第一个子元素被插入。?
Ext.fly('elId').insertFirst({
????tag:?'p',
????cls:?'myCls',
????html:?'Hi?I?am?the?new?first?child'

});
replace?
用于当前这个元素替换传入的元素。?
var?el?=?Ext.get('elId1');????

?//?'elId'去替换'elId2'

Ext.fly('color: #80000