EXT核心API详解(三)-Ext.Element
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,只是传参方式不同 例:
和
是等价的,都是在 按下ctral+a或ctrl+b后呼叫fn addListener( String eventName, Function fn, [Object scope], [Object options] ) : void 定义事件侦听,eventName:事件名,fn:事件处理方法,scrope:范围,其中options的定义比较复杂,可以包含以下属性
当然,还可能自定义参数以传入function alignTo( Mixed element, String position, [Array offsets], [Boolean/Object animate] ) : Ext.Element 将el对齐到element,positon,指示对齐的位置,可选以下定义
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包含自己 |
