exths 裡的 Ext.getEl()的理解

Ext.ElementAPI比較多，大夥用的時候也難以在短時間把住它的脈絡，主要功能。這個給個總結，而不是一個API說明。說到API說明，網上早有大俠做得蠻不錯的了。

位置設定：

getX()   取得相對於頁面的x座標
getY()   取得相對於頁面的y座標
getXY()　取得相對於頁面的x,y座標，用法：ele.getXY()[0]/[1]
getOffsetsTo(el)  取得相對元素el的座標，返回值[x,y]
setX(x,animate)  設相對於頁面的x座標,animate為true則開啟預設動畫效果
setY(y,animate)　　同上
setLeft(left)　　　設style.left
setTop(top)　　　　設style.top
setRight(right)　　設style.right
setBottom(bottom)　設style.bottom
setXY(pos,animate)　設相對於頁面的x,y，相當於setX,setY。用法：setXY([x,y],true)
setLocation(x,y,animate)　相當於setXY。
getRegion()       return {top=t,left=l,width=w,height=r}
getHeight(true|false)   true不包括邊框、內邊距，false包括
getBorderWidth(anthor)
getPadding(anthor)
getComputedHeight()  包括邊框、內邊距
getComputedWidth()
getSize()  相當於getWidth、getHeight  {width:w,height:h}
getStyleSize()  取style.width、style.height，且不包括邊框{width:w,height:h}
getViewSize()   取視口大小{width:w,height:h}
getValue()    如果有value屬必就取它
setWidth(width,animate)    設style.width
setHeight(height,animate)   設style.height
setSize(width,height,animate)
setBounds(x,y,width,height,animate)  相當於setSize、setXY
setRegion(region,animate)     相當於setBounds
getScroll()           取得當前視口在文件中水平、垂直方向上的偏移,返回{left:l,top:t}

setOpacity(opacity,animate)
getLeft(local)   false相當於getX,true相當於style.left
getRight(local)  false相當於getX+getWidth,true相當於getLeft(true)+getWidth()
getTop(local)　　 false相當於getY,true相當於style.top
getBottom(local)
position(pos,zIndex,x,y) string:pos,取static,relative,absolute,fixed
                         zIndex設z序，x,y用來呼叫setXY的
clearPositionsing(value)  作用非得看程式碼
   clearPositioning : function(value){
       value = value ||'';
       this.setStyle({
           "left": value,
           "right": value,
           "top": value,
           "bottom": value,
           "z-index": "",
           "position" : "static"
       });
       return this;
    }

getPositioning()　　取值格式如上{……}
setPositioning(pc)  用法同applyStyles
setLeftTop(left,top)  就是設style.left,style.top

moveTo(x,y,animate)　　　　相當於setXY
move(direction,distance,animate)  很有用，direction移動方向，取t,l,r,b。
                   distance是移動的距離，animate是否啟用動畫效果

getAnchorXY（anchor,local,s)　　　取得對齊到某處的頁面x,y座標
getCenterXY()　　　　　　　　　　取得對齊到視口中央的頁面x,y座標
getAlignToXY(el,p,o)　　　　　　　取得對齊到某元素某處的頁面x,y座標

alignTo(element,position,offsets,animate)　　對齊到元素的某處，允許偏移、動畫
anchorTo(el,alignment,offsets,animate,monitorScroll,callback)　　對齊到元素

center(centerIn)　　　對齊到視口中央
getBox(contentBox,local)　　contentBox＝false包括邊框、內邊距　local＝false獲取頁面座標
setBox(box,adjust,animate)  box包括邊框、內邊距
getFrameWidth(sides,onlycontentBox)

repaint()   強制重新整理元素

 

關於樣式、屬性設定

addClass(String/Array className )
removeClass(String/Array className)
replaceClass(String oldClassName, String newClassName )
radioClass(String/Array className )
toggleClass(String className )
setStyle(name,value)
getStyle(name)
hasClass(className)

addClassOnClick(classname)
addClassOnFocus(classname)
addClassOnOver(classname)
hover(classsname,bool preventFlicker)

頁點操作：
append(ele)
appendTo(ele)
replace(ele)
replaceWith(ele)
insertBefore(ele)
insertAfter(ele)
insertFirst(ele)
insertHtml(where,html,returnEl)
insertSibling(el,where,returnDom)
remove()
createChild(config,HTMLElement insertbefore,returndom)

first(selector,returndom)
last(selector,returndom)
next(selector,returndom)
prev(selector,returndom)
parent(selector,returndom)
child(selector,returndom)
up(selector,maxdepth)
down(selector,maxdepth)

query(selector)

contains(HTMLElement/string el)

show(animate)
hide(animate)
toggle(animate)
setVisible(boolean visible,animate)

update(html, loadScripts, callback)

特殊的
hover( Function overFn, Function outFn, [Object scope] ) :Ext.Element
mask(msg, msgCls)
unmask()
load( String/Function url, [String/Object params], [Functioncallback], [Boolean discardUrl] )
focus()
blur()

事件註冊：
on(eventname,fun)
un(eventname,fun)
addListenser/removeListenser/removeAllListeners