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包含自己