EXT核心API详解(三)-Ext.Element

Ext.Element类



Element( String/HTMLElement element, [Boolean forceNew] )

由id或DOM节点创建Element对象



Element.fly( String/HTMLElement el, [String named] ) : Element

由id或DOM节点创建一个全局共享的活动元素,可由named命名以避免可能的冲突



Element.get( Mixed el ) : Element

由id或DOM节点或已存在的Element得到一个Ext.Element对象



addClass( String/Array className ) : Ext.Element

为元素添加一个或多个css类名



addClassOnClick( String className ) : Ext.Element

为点击事件添加和移除css类



addClassOnFocus( String className ) : Ext.Element

为得到和失去焦点添加和移除css类



addClassOnOver( String className, [Boolean preventFlicker] ) : Ext.Element

为鼠标移入移出事件添加和移除css类(该方法未实际使用preventFlicker参数)



addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.KeyMap

为对象添加按键侦听 key由数值或字符串或{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}这样的对象或他们的数组组成



addKeyMap( Object config ) : Ext.KeyMap

功能同addKeyListener,只是传参方式不同

例:

el.addKeyMap({key : "ab",ctrl : true,fn: fn,scope:el });

和

el.addKeyListener({key:"ab",ctrl:true},fn,el);

是等价的,都是在 按下ctral+a或ctrl+b后呼叫fn



addListener( String eventName, Function fn, [Object scope], [Object options] ) : void

定义事件侦听,eventName:事件名,fn:事件处理方法,scrope:范围,其中options的定义比较复杂,可以包含以下属性

scope {Object} : 处理fn的范围

delegate {String} : 一个简单选择器(过滤目标或寻找目标的子孙节点)

stopEvent {Boolean} : 阻止事件,等于preventDefault+stopPropagation

preventDefault {Boolean} : 阻止默认活动

stopPropagation {Boolean} : 阻止事件冒泡

normalized {Boolean} :设为flase将允许浏览器事件替代Ext.EventObject

delay {Number} : 延时多少毫秒后发生

single {Boolean} : 只运行一次

buffer {Number} : 在Ext.util.DelayedTask中预定事件

当然,还可能自定义参数以传入function





alignTo( Mixed element, String position, [Array offsets], [Boolean/Object animate] ) : Ext.Element

将el对齐到element,positon,指示对齐的位置,可选以下定义

tl     左上角(默认)

t      上居中

tr     右上角

l      左边界的中央

c      居中

r      右边界的中央

bl     左下角

b      下居中

br     右下角

position还可以使用?约束移动不能超出窗口

offsets 偏移量,以象素为单位

animate 详见animate定义



例:div1.alignTo('div2','c-bl?',[20,0],true);

采用默认动画将div1的最中央对齐到div2的左下角,并右移20个象素,且不能超出窗口





anchorTo( Mixed element, String position, [Array offsets], [Boolean/Object animate], [Boolean/Number monitorScroll], Function callback ) : Ext.Element

功能和alignTo类似,只是当窗口重定义大小的时候也会引发重对齐事件

monitorScroll参数说明是否需要监视滚动条行为,如果定义为数值则是定义的延时,单位为毫秒,默认是50ms,

callback定义了animate完成后的回叫方法



animate( Object args, [Float duration], [Function onComplete], [String easing], [String animType] ) : Ext.Element

执行动画.

args:目标

duration:时间间隔.默认是0.35

Function:完成后的回叫方法

easing:行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的

easeNone:匀速

easeIn:开始慢且加速

easeOut:开始快且减速

easeBoth:开始慢且减速

easeInStrong:开始慢且加速,t的四次方

easeOutStrong:开始快且减速,t的四次方

easeBothStrong:开始慢且减速,t的四次方

elasticIn:

elasticOut:

elasticBoth:

backIn:

backOut:

backBoth:

bounceIn:

bounceOut:

bounceBoth:

太多,慢慢体会吧

animType:定义动画类型,默认值run 可选值:color/motion/scroll





appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element

添加子元素el(el须已存在)



appendTo( Mixed el ) : Ext.Element

将当前元素添加到el



applyStyles( String/Object/Function styles ) : Ext.Element

应用样式,styles是"width:100px"这样的字符串或{width:"100px"}这样的对象,function是指返回这样的字串和对象的函数,这是一个没有用的批示,因为任何传参的地方都可以是返回要求类型的function.另见setStyle



autoHeight( [Boolean animate], [Float duration], [Function onComplete], [String easing] ) : Ext.Element

自适应高度,参数都是老相识了,惟一需要注意的是这个方法使用了setTimeout,高度不会马上变更



blur() : Ext.Element

失去焦点,忽略所有的异常



boxWrap( [String class] ) : Ext.Element

用一个指定样式class的div将当前元素包含起来,class默认值为x-box



center( [Mixed centerIn] ) : void

alignTo的简华版.相当于alignTo(centerIn || document, 'c-c'),当前元素的中心对齐到centerIn元素的中心



child( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element

依selector选择子孙节点,依returnDom不同批示返回html元素还是ext元素,未定义或false时返回Ext.Element



clean( [Boolean forceReclean] ) : void

清除无用的空白文本节点(我喜欢这个想法)



clearOpacity() : Ext.Element

清除当前元素样式中不通用元素,清除ie中的filter,清除FF中的opacity/-moz-opacity/-khtml-opacity



clearPositioning( [String value] ) : Ext.Element

 清除定位,恢复到默认值,相当于

 this.setStyle({"left": value,"right": value,"top": value,"bottom": value,"z-index": "","position" : "static"});



clip() : Ext.Element

裁剪溢出部分,用unclip()恢复



contains( HTMLElement/String el ) : Boolean

当前元素中是否存在el



createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.Element

创建一个新的子节点

config :DomHelper元素对象,如果没有特别指明tag,将使用div做默认tag,详情参见DomHelper,如果未定义insertBefore,则追加



createProxy( String/Object config, [String/HTMLElement renderTo], [Boolean matchBox] ) : Ext.Element

创建一个代理元素

config:代理元素的类名或DomHelper config对象

renderTo:将要绘制代理元素的html element或id

matchBox:是否对齐



createShim() : Ext.Element

在当前元素之前创建一个classname为ext-shim的iframe,有什么用?



down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element

通过样式选择器selector选择子孙节点



enableDisplayMode( [String display] ) : Ext.Element

setVisibilityMode的简便方法



findParent( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement

通过简单选择器selector寻找祖先节点 ,直到maxDepth(元素maxDepth默认为10,也可以是指定的DOM 节点),找不到返回null



findParentNode( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement

从父元素开始使用简单选择器selector选择DOM节点



first( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement

得到第一个符合selector条件的子节点,跳过文本节点



focus() : Ext.Element

得到焦点



getAlignToXY( Mixed element, String position, [Array offsets] ) : Array

得到当前元素按position规则对齐到element时的XY坐标值 position/offsets参数参见alignTo方法



getAnchorXY( [String anchor], [Object size], [Boolean local] ) : Array

得到当前元素锚点指定的坐标值 anchor定义参见alignTo方法,默认为c



getAttributeNS( String namespace, String name ) : String

得到使用了命名空间namespace的属性name之值,



getBorderWidth( String side ) : Number

得到side指定的边框之和,side可以是t, l, r, b或他们的任意组合,比如getBorderWidth("lr")就是得到左边框和右边框之和



getBottom( Boolean local ) : Number

得到当前元素的底部纵坐标,元素纵坐标+元素高度



getBox( [Boolean contentBox], [Boolean local] ) : Object

得到当前元素的box对象:{x,y,width,height}



getCenterXY() : Array

如果当前元素要居中对齐时的横纵坐标值,等价getAlignToXY(document, 'c-c')



getColor( String attr, String defaultValue, [String prefix] ) : void

得到当前元素指定attr的颜色值,如果没指定,返回defualtValue,比较郁闷的是明明不是void为什么api中批示是一个void?应该是个字符串



getComputedHeight() : Number

得到计算过的高度,得到offsetHeight或css中定义的height值之一,如果使用了padding/borders,也会计算进去



getComputedWidth() : Number

见getComputedHeight



getFrameWidth( String sides ) : Number

得到sides定义的border宽度和padding定义的宽度之和,side定义见getBorderWidth



getHeight( [Boolean contentHeight] ) : Number

返回元素的offsetHeight



getLeft( Boolean local ) : Number

得到横坐标



getMargins( [String sides] ) : Object/Number

如果没有定义sides,则返回一个含有{left,top,width,height}对象,反之返回side指定的宽度,side定义见getBorderWidth



getOffsetsTo( Mixed element ) : Array

计算从element到当前元素的偏移量



getPadding( String side ) : Number

得到由side指定的padding之和



getPositioning() : Object

得到当前元素的位置信息 返回含以下属性的对象{position,left,right,top,bottom,z-index}



getRegion() : Region

得到当前元素的区域信息 返回含有以下属性的Ext.lib.Region对象{top, left, bottom, right}



getRight( Boolean local ) : Number

右边界值



getScroll() : Object

得到一个批示滚动条位置的对象{left, top}



getSize( [Boolean contentSize] ) : Object

得到宽度和高度组成的对象信息{width,height}



getStyle( String property ) : String

得到指定的样式值 getStyles简化版



getStyles( String style1, String style2, String etc. ) : Object

得到由参数组成的对象

 例:el.getStyles('color', 'font-size', 'width')

 可能返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}



getTop( Boolean local ) : Number

得到顶点纵坐 标



getUpdater() : Ext.Updater

得到当前元素的Updater对象,参见Ext.Updater类



getValue( Boolean asNumber ) : String/Number

得到value属性的值



getViewSize() : Object

得到clientHeight和clientWidth信息给成的对象{width,height}



getWidth( [Boolean contentWidth] ) : Number

..这样的方法真多



getX() : Number

getXY() : Array

getY() : Array

得到页面偏移量,也就是绝对坐标



hasClass( String className ) : Boolean

样式类className 存在于当前元素的dom 节点中



hide( [Boolean/Object animate] ) : Ext.Element

隐藏当前元素



hover( Function overFn, Function outFn, [Object scope] ) : Ext.Element

设置鼠标移入移出事件



initDD( String group, Object config, Object overrides ) : Ext.dd.DD

initDDProxy( String group, Object config, Object overrides ) : Ext.dd.DDProxy

initDDTarget( String group, Object config, Object overrides ) : Ext.dd.DDTarget

这个要放到 Ext.dd去专门搞了,用于拖曳



insertAfter( Mixed el ) : Ext.Element

insertBefore( Mixed el ) : Ext.Element

insertFirst( Mixed/Object el ) : Ext.Element

在DOM中el元素之前之后...插入当前元素



insertHtml( String where, String html, Boolean returnEl )

插入html内容 where 可选beforeBegin, afterBegin, beforeEnd, afterEnd



insertSibling( Mixed/Object/Array el, [String where], [Boolean returnDom] ) :

插入或创建el做为当前元素的兄弟节点,where可选before/after,默认为before



is( String selector ) : Boolean

验证当前节点是否匹配简单选择器selector



isBorderBox()

测试不同的样式规则以决定当前元素是否使用一个有边框的盒子



isDisplayed() : Boolean

只要不是指定display属性none都会返回真



isMasked() : Boolean

仅有当前元素有mask并且可见时为真,mask译为蒙片?就是有些输入框没得到值之前会有一行模糊的提示的那种东西



isScrollable() : Boolean

可以滚动?



isVisible( [Boolean deep] ) : Boolean

可见?



last( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement

见first



load( String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] ) : Ext.Element

直接应用当前updater的update方法



mask( [String msg], [String msgCls] ) : Element

为当前对象创建蒙片



move( String direction, Number distance, [Boolean/Object animate] ) : Ext.Element

相前元素相对于当前位置移动,

direction批示方向可能的值是"l","left" - "r","right" - "t","top","up" - "b","bottom","down".

distance,指示要移动的距离,以像素为单位



moveTo( Number x, Number y, [Boolean/Object animate] ) : Ext.Element

称动到指定的位置



next( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement

下一个符合selector的兄弟节点,



on( String eventName, Function fn, [Object scope], [Object options] ) : void

详见addListener



position( [String pos], [Number zIndex], [Number x], [Number y] ) : void

初始化当前元素的位置 pos可选择relative/absolute/fixed



prev( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement

前一个符合selector的兄弟节点



query( String selector ) : Array

通过样式选择器选择子节点



radioClass( String/Array className ) : Ext.Element

添加样式或样式数组到当前元素，并移除兄弟节点中的指定样式



relayEvent( String eventName, Object object ) : void

将当前元素的eventName事件同时转发给object对象



remove() : void

从当前DOM中删除元素,并从缓存中移除



removeAllListeners() : Ext.Element

移除所有的侦听者



removeClass( String/Array className ) : Ext.Element

移除样式类



removeListener( String eventName, Function fn ) : Ext.Element

移除事件eventName的fn侦听器



repaint() : Ext.Element

强制浏览器重绘当前元素



replace( Mixed el ) : Ext.Element

用当前元素替换el



replaceClass( String oldClassName, String newClassName ) : Ext.Element

替换样式类



replaceWith( Mixed/Object el ) : Ext.Element

用el替换当前元素



scroll( String direction, Number distance, [Boolean/Object animate] ) : Boolean

滚动,scroll会保证元素不会越界,direction和distance参数见move



scrollIntoView( [Mixed container], [Boolean hscroll] ) : Ext.Element

滚动到container内的视图



scrollTo( String side, Number value, [Boolean/Object animate] ) : Element

基本与scroll方法相同,但不保证元素不越界



select( String selector, [Boolean unique] ) :

与query不同的是,通过样式选择器selector,select方法会返回一个复合元素对象(CompositeElement)或CompositeElementLite,



set( Object o, [Boolean useSet] ) : Ext.Element

设置属性，例

el.set({width:'200px',height:'200px'});



setBottom( String bottom ) : Ext.Element

setLeft( String left ) : Ext.Element

setRight( String right ) : Ext.Element

setTop( String top ) : Ext.Element

setLeftTop( String left, String top ) : Ext.Element

设置css 对象的属性值



setBounds( Number x, Number y, Number width, Number height, [Boolean/Object animate] ) : Ext.Element

马上改变当前元素的位置和尺寸



setBox( Object box, [Boolean adjust], [Boolean/Object animate] ) : Ext.Element

为当前元素设置一个盒子box:{x, y, width, height},adjust指示是否马上调整尺寸



setDisplayed( Boolean value ) : Ext.Element

设置可见性



setHeight( Number height, [Boolean/Object animate] ) : Ext.Element

setWidth( Number width, [Boolean/Object animate] ) : Ext.Element

setSize( Number width, Number height, [Boolean/Object animate] ) : Ext.Element

设置高度和宽度



setLocation( Number x, Number y, [Boolean/Object animate] ) : Ext.Element

设置当前元素相对于页面的横纵坐标



setOpacity( Float opacity, [Boolean/Object animate] ) : Ext.Element

设置透明度，opacity为1完全不透明,0完全透明



setPositioning( Object posCfg ) : Ext.Element

为当前元素指定位置信息,参数posCfg参见getPositioning说明



setRegion( Ext.lib.Region region, [Boolean/Object animate] ) : Ext.Element

为当前元素指定区域信息 region定义 见getRegion



setStyle( String/Object property, [String value] ) : Ext.Element

设置样式



setVisibilityMode( visMode Element.VISIBILITY ) : Ext.Element

指示是使用Element.VISIBILITY还是Element.DISPLAY属性来定义可见性



setVisible( Boolean visible, [Boolean/Object animate] ) : Ext.Element

设置可见性





setX( Number The, [Boolean/Object animate] ) : Ext.Element

setXY( Array pos, [Boolean/Object animate] ) : Ext.Element

setY( Number The, [Boolean/Object animate] ) : Ext.Element

设置当前元素相对于page的位置



show( [Boolean/Object animate] ) : Ext.Element

显示当前元素



swallowEvent( String eventName, [Boolean preventDefault] ) : Ext.Element

阻止eventName事件冒泡，并视preventDefault阻断默认行为



toggle( [Boolean/Object animate] ) : Ext.Element

切换元素的visibility 或display属性,依赖于setVisibilityMode设定的



toggleClass( String className ) : Ext.Element

如果样式名存在于当前元素对应的dom 节点，移除，反之应用



translatePoints( Number/Array x, Number y ) : Object

返回一个{left,top}结构



un( String eventName, Function fn ) : Ext.Element

解除事件侦听，参见   removeListener



unclip() : Ext.Element

见clip;



unmask() : void

见mask;



unselectable(): Ext.Element

禁止文本选择



up( String selector, [Number/Mixed maxDepth] ) : Ext.Element

通过样式选择器selector选择祖先节点



update( String html, [Boolean loadScripts], Function callback ) : Ext.Element

利用html更新当前节点内容，loadScripts指示html中如果有script，是否需要运行,这是一个innerHTML的一个老老老问题了



wrap( [Object config], [Boolean returnDom] ) : HTMLElement/Element

用另一个元素config包含自己

作者姓名：blackant2
作者博客：http://blog.csdn.net/blackant2