[置顶] Ext核心库的研究

 

1.         Ext.DomHelper

这是一个DOM操作的辅助类，这个类其实很简单，主要进行元素的插入操作，它将插入的DOM元素的情况分为四类：在开始标记之前；在开始标记之后；在结束标记之前；在结束标记之后。被插入的元素可以html片断，也可以是一个配置对象，一个配置对象基本上包括：tag、children或cn、html、style、cls、htmlFor，这几个属性较为特殊，其它的属性都作为tag标记的普通元素如width等，经过测试发现并不是任何情况都能够插入成功，一般符合实际情况的元素关系才会成功。另外这个类还有三个方法：应用一个样式到指定的元素上；建立一个配置对象的html片断；建立一个html片断模板，它的接口如下：

append( String/HTMLElement/Element el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element

建立一个新DOM元素，并添加到一个指定的DOM元素

applyStyles( String/HTMLElement el, String/Object/Function styles ) : void

应用一个样式到指定的元素上

createTemplate( Object o ) : Ext.DomHelper.Template

从一个配置的DOM对象建立一个html片断模板

insertAfter( String/HTMLElement/Element el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.Element

插入到指定的元素之后

insertBefore( String/HTMLElement/Element el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element

插入到指定的元素之前

insertFirst( String/HTMLElement/Element el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element

插入到指定元素的开始标签之后

insertHtml( String where, HTMLElement el, String html ) : HTMLElement

插入一个html片断到指定DOM元素的指定的方位

markup( Object o ) : String

返回一个DOM配置对象的html片断

overwrite( String/HTMLElement/Element el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element

用指定的DOM对象去替换，另一个指定的DOM对象的内容

2.         Ext.Template

这个类也是一个DOM操作的辅助类，主要用在动态建立具有相似的DOM结构中，它的主要作用就是做一个模板，动态数据先用占位符先表示，然后用实际值去替换模板中的占位符，形成一个html片断，它的主操作接口与DomHelper类有几分相似：

Template.from( String/HTMLElement el ) : s

<static>从一个html片断或DOM元素建立一个模板

append( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

将替换值的html片断，添加到指定的元素中

apply() : void

applyTemplate的别名

applyTemplate( Object values ) : String

返回用值替换模板后的html片断

compile() : Ext.Template

编译模板，消除正则表达式的额外开销.

insertAfter( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

替换后的html片断添加到指定元素的结束标记后

insertBefore( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

替换后的html片断添加到指定元素的开始标记前

insertFirst( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

替换后的html片断添加到指定元素的开始标记后

overwrite( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

用替换后的html片断覆盖

set( String html, [Boolean compile] ) : Ext.Template

与from方法差不多，与构造也差不多.

3.         Ext.UpdateManager

这个类主要对一个元素提供一个Ajax风格的内容更新，使用这个一般有三种方式：

A.从Ext.Element类对象来获取

var el = Ext.get("foo");

var mgr = el.getUpdateManager();

mgr.update("http://myserver.com/index.php", "param1=1&param2=2");

...

mgr.formUpdate("myFormId", "http://myserver.com/index.php");

B.或者直接实例化(实际还是返回的是Ext.Element类对象的实例)

var mgr = new Ext.UpdateManager("myElementId");

mgr.startAutoRefresh(60, "http://myserver.com/index.php");

mgr.on("update", myFcnNeedsToKnow);

C.或者直接从一个Ext.Element类对象的内部进行调用

   Ext.get("foo").load({

        url: "bar.php",

        scripts:true,

        params: "for=bar",

        text: "Loading Foo..."

   });

Ext.UpdateManager类的实例有已经下的配置属性:

 

defaultUrl : String

默认的请求地址，或最后一次的请求地址，通常刷新时会使用

disableCaching : Boolean

禁用缓存，如果为true则会每次请求中多加一个当前时间参数，这会使每次的求都不相同，因此就不会缓存数据

el : Ext.Element

与更新管理器关联的元素对象

formUpdateDelegate : Function

formUpdate()方法的代理方法，代理方法一般都是用来创建回调方法的，对于回调方法如果有参数，且参数不确定，则可以通过代理方法来创建这样的方法myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arg...

indicatorText : String

加载时的提示文字，默认<div class="loading-indicator”>loading…</div>

loadScripts : Boolean

在输出中是否处理脚本，即加载数据时是否执行js脚本

refreshDelegate : Function

刷新的代理myUpdater.refreshDelegate.createCallback(arg1, arg2)

renderer : Object

渲染器，默认为Ext.UpdateManager.BasicRenderer.

showLoadIndicator : String

是否显示加载时的提示文字.

sslBlankUrl : String

以SSL方式上传文件的地址(默认为Ext.UpdateManager.defaults.sslBlankUrl 或者"about:blank").

timeout : Number

超时时间(默认Ext.UpdateManager.defaults.timeout or 30 seconds).

transaction : Object

当前执行事务的事务对象

updateDelegate : Function

更新代理myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments

此类的公共方法接口:

UpdateManager( String/HTMLElement/Ext.Element el, [Boolean forceNew] )

直接建立一个更新管理器

UpdateManager.updateElement( String/HTMLElement/Ext.Element el, String url, [String/Object params], [Object options] ) : void

此方法已经不推荐使用，使用el.load()替换

abort() : void

终止正在执行的事务

formUpdate( String/HTMLElement form, [String url], [Boolean reset], [Function callback] ) : void

执行异步表单提交

getEl() : Ext.Element

获取此更新管理器绑定的元素

isUpdating() : Boolean

如果一个更新正在被处理

refresh( [Function callback] ) : void

刷新数据

setDefaultUrl( String/Function defaultUrl ) : void

默认的请求地址

setRenderer( Object renderer ) : void

设置内容的渲染器，默认为Ext.UpdateManager.BasicRenderer.render

showLoading() : void

显示loading，如果覆写此方法，可以定制自己的loading

startAutoRefresh( Number interval, [String/Function url], [String/Object params], [Function callback], [Boolean refreshNow] ) : void

设置此元素自动刷新

stopAutoRefresh() : void

停止此元素上的自动刷新

update( Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] ) : void

执行一个异步请求来更新此更新管理器绑定的元素

4.         Ext

它是Ext的核心工具类，主要实现有：属性的复制、属性的条件复制、为指定的元素绑定监听器、继承、覆盖、迭代、获取元素、判定对象的类型等；另外通过它的属性复制为Function、String、Array等类添加了一些实用方法

5.      Ext.Element

它是一个很大的类，方法也很多，此类是DOM元素的代表，它本身也是对DOM元素的一个包装，它的主要操作包括以下几个方面：DOM相关的查询操作；DOM元素的尺寸与定位操作；元素内容的更新操作；简单监听器的添加；为元素添加遮盖等

6.      Ext.EventManager

主要用于注册事件处理器，让它们接收一般事件对象代替标准事件对象，并提供几个有用的事件：此类主要有注册、注销监听，注册文档加载完成的监听，注册窗体大小改变的监听，文本大小改变的监听

7.     Ext.Fx

这个类主要是为元素对象添加动画支持