`
kuru
  • 浏览: 140109 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

[转载]EXT核心API详解(三)

阅读更多
[转载]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
创建一个新的子节点
configomHelper元素对象,如果没有特别指明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包含自己
分享到:
评论

相关推荐

    EXT核心API详解

    EXT核心API详解 EXT核心API详解 EXT核心API详解

    EXT核心API详解下载

    EXT核心API详解下载 EXT核心API详解下载

    EXT核心API详解.chm

    是EXT核心API详解

    Ext API详解 Ext API详解

    Ext API详解 Ext API详解 Ext API详解

    EXT核心API详解 19章

    EXT核心API详解是一份深入解析EXT库核心技术的教程,共分为19个章节,涵盖了EXT库的各个方面。EXT是一个基于JavaScript的用户界面库,它提供了一套完整的组件模型,用于构建富互联网应用程序(RIA)。EXT API是EXT库...

    EXT核心API详解(第一部分)

    5. **EXT核心API详解(三)-Ext.DomQuery DomHelper Template**:这部分主要涉及DOM查询、DOM辅助器和模板。`Ext.DomQuery`(简称`$`)类似于jQuery的`select`,用于高效地选取DOM节点,支持XPath和CSS选择器。`Ext....

    Ext API详解--笔记

    在`EXT核心API详解(三)-Ext.Element.txt`中,你将了解到如何选择元素、添加和移除CSS类、处理事件、动画效果以及布局调整。 2. **Array, Date, Function, Number, String**: 在`EXT核心API详解(二)-Array Date ...

    整理的Ext API详解

    "EXT核心API详解(三)-Ext.Element.txt"深入解析了Ext.Element,这是Ext处理DOM元素的核心接口。文件可能涵盖了选择和操作DOM元素的方法,如样式设置、尺寸调整、事件监听等,是进行页面动态操作的基础。 "EXT核心...

    EXT核心API详解.doc

    EXT核心API详解主要涵盖了一系列用于构建富客户端应用的JavaScript库函数和方法。这些API提供了丰富的功能,包括元素操作、事件处理、数据序列化与反序列化、类继承以及组件管理等。以下是对EXT核心API中提及的一些...

    Ext2 核心 API 中文详解

    Ext2 核心 API 中文详解 Ext2 核心 API 中文详解 Ext2 核心 API 中文详解 Ext2 核心 API 中文详解 Ext2 核心 API 中文详解Ext2 核心 API 中文详解Ext2 核心 API 中文详解Ext2 核心 API 中文详解Ext2 核心 API 中文...

Global site tag (gtag.js) - Google Analytics