EXT核心API详解(五)_Ext.Template/Ext.XTemplate/EventManager/EventObject/CompositeEleme

Ext.Template类
Template类主要是功能是生产html片断,例
var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
    '</div>'
);
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
公用方法:
Template( String/Array html )
构造一个Ext.Template对象,参数可以是字符串形式的html代码或它们组成的数组,
Template.from( String/HTMLElement el, Object config ) : Ext.Template
能过el的value(优先)或innerHTML来构造模板
append( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertAfter( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertFirst( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

这组方法提供由 value产生的html 代码,并添加到dom 做为el的最后一个子节点/下一个兄弟节点/前一个兄弟节点/第一个子节点
values解释参见applyTemplate
apply() : void
applyTemplate( Object values ) : String
apply是applyTemplate的简写,如果参数是数字values可以是一个数组,或者一个象 {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}这样的json对象
compile() : Ext.Template
编译模板,替换掉模板中的\=>\\ ,\r\n|\n==>\\n, '=\',主要是为了js自己处理方便
overwrite( Mixed el, Object values, [Boolean returnElement] ) :
利用values生成html替换el的内容
set( String html, [Boolean compile] ) : Ext.Template
设置模板的html,如果compile为真将调用compile方法

Ext.XTemplate
增强型模板,支持更多功能了,虽然方法不多,但用起来来还真的很麻烦,但并不建议大家学习这样的自定义语法,不如用xslt
另外这个Xtemplate虽然命名空间在Ext之下,但源文件却是放在util目录中的
XTemplate( String/Array html )
XTemplate.from( String/HTMLElement el ) : Ext.XTemplate
apply() : void
applyTemplate( Object values ) : String
compile() : Function

这些方法Ext.Template中都有说明

Ext.EventManager

事件管理者中的大部分方法都在Ext中有定义,主要用于事件管理
addListener( String/HTMLElement el, String eventName, Function handler,
on( String/HTMLElement el, String eventName, Function handler, [Object scope], [Object options] ) : void
onDocumentReady( Function fn, [Object scope], [boolean options] ) : void
removeListener( String/HTMLElement el, String eventName, Function fn ) :
un( String/HTMLElement el, String eventName, Function fn ) : Boolean

参见Ext
onWindowResize( Function fn, Object scope, boolean options ) : void
窗口大小变更时触发
onTextResize( Function fn, Object scope, boolean options ) : void
活动文本尺寸变更时触发
Ext.EventObject
这两个类都定义在EventManager.js中,分开是为了逻辑上更清晰吧,这个类主要用于描述事件本身,一般用做事件处理方法的参数
另外这个害定义了一些键值常量,比ascii码好记

function handleClick(e){ // 这儿的e就是一个EventObject对象
    e.preventDefault();
    var target = e.getTarget();
    ...
}
var myDiv = Ext.get("myDiv");
myDiv.on("click", handleClick);
//or
Ext.EventManager.on("myDiv", 'click', handleClick);
Ext.EventManager.addListener("myDiv", 'click', handleClick);
getCharCode() : Number
getKey() : Number

在非webkit|khtml类型网页中这两个方法是一样的,得到按键的值
getPageX() : Number
getPageY() : Number

getXY() : Array
得到事件坐标
getRelatedTarget() : HTMLElement
得到关联目标?我总是得到null
getTarget( [String selector], [Number/Mixed maxDepth], [Boolean returnEl] ) :
如果没有定义selector则直接返回target属性,如果定义了selector,则利用selector寻找祖先节点
getTime() : Number
得到事件发生的时间?
getWheelDelta() : Number
应该是个过时的方法,反正在ie和火狐下都不知道做什么用的,原意应该是得到鼠标的按键信息?
hasModifier() : Boolean
事件发生时是否同时按下了ctrl/alt/shift键之一?
preventDefault() : void
阻止浏览器的默认事件?
stopEvent() : void
preventDefault+stopPropagation
stopPropagation() : void
阻止事件冒泡
within( Mixed el, [Boolean related] ) : Boolean
如果事件的目标是el或者它的子节点将返回真
Ext.CompositeElement类
基础的复合元素类,为容器中每个元素创建一个Ext.Element对象
虽然不是继承自Ext.Element,但事实上它几乎支持Element类的所有方法
例:
var els = Ext.select("#some-el div.some-class", true);
els.setWidth(100);
add( String/Array els ) : CompositeElement
添加 css选择器els匹配的元素 或 元素组成的数组 到当前对象
clear() : void
清除所有元素
contains() : Boolean
应该是contains(Mixed el):Boolean,当前复合元素中是否含有el
each( Function fn, [Object scope] ) : CompositeElement
通过el,this,index参数为每个元素调用fn
fill( String/Array els ) : CompositeElement
clear()& add(els)
filter( String selector ) : CompositeElement
过滤
first() : Ext.Element
第一个元素
getCount() : Number
//元素的数量
indexOf() : Boolean
同contains一样应该有个Mixed参数
item( Number index ) : Ext.Element
第index个元素
last() : Ext.Element
最后一个元素
removeElement( Mixed el, [Boolean removeDom] ) : CompositeElement
删除el元素
replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) : CompositeElement
替换
Ext.CompositeElementLite
由Ext.CompositeElement继承而来,重写了一些方法,但没看出与父类有什么不同

你可能感兴趣的:(html,json,ext,IE,webkit)