Extjs的一些基礎使用！

1、獲取元素（Getting Elements)

1. Ext.get()

var el = Ext.getCmp('id');//獲取元素，等同於document.getElementById('id');//會緩存

2. Ext.fly()

var el = Ext.fly('id')//不會緩存。

注：享元模式（Flyweight Design Pattern）是一種節省內存的模式，該模式的大概原理是創建單個全體對象而後不斷反覆使用它。

3. Ext.getDom()

var dom1 = Ext.getDom('id');     // 依據id來查dom節點 
var dom2 = Ext.getDom(element);  // 依據元素來查dom節點

2、操做class類名

一、addClass()

Ext.fly('id').addClass('className'); // 加入元素的'className'的樣式

二、removeClass()

Ext.fly('id').removeClass('className'); // 刪除class

三、toggleClass()

Ext.fly('id').toggleClass('className'); // 切換刪除添加類名

四、replaceClass()

Ext.fly('id').replaceClass('className1', 'className2');//替換樣式

五、radioClass()

Ext.fly('id').radioClass('className');   //添加一個或多個className到這個元素，並移除其餘兄弟節點上的相同類名。

六、hasClass()

if (Ext.fly('id').hasClass('className')) { //當含有該樣式返回true 
     
}

七、getStyle()

var width = Ext.fly('id').getStyle('width');//返回該元素的統一化當前樣式和計算樣式。 
var height = Ext.fly('id').getStyle('height');//返回該元素的統一化當前樣式和計算樣式。

八、setStyle()

Ext.fly('id').setStyle({ 
     display : 'block', 
     overflow : 'hidden', 
     cursor : 'pointer' 
});//設置元素的樣式，也能夠用一個對象參數包含多個樣式。

九、getColor()

Ext.fly('id').getColor('color');//爲指定的CSS屬性返回CSS顏色

十、setOpacity()

Ext.fly('id').setOpacity(.45, true);//設置元素的透明度。

十一、clearOpacity

Ext.fly('id').clearOpacity();//清除這個元素的透明度設置

3、定位(position)

一、getX

//返回元素相對於頁面座標的X位置。元素必須是屬於DOM樹中的一部分才擁有正確的頁面座標（display:none            或未加入的elements返回false）。 
var pageX = Ext.fly('id').getX()

二、getY

//返回元素相對於頁面座標的Y位置。元素必須是屬於DOM樹中的一部分才擁有正確的頁面座標（display:none或未加入的elements返回false）。 
var pageY = Ext.fly('id').getY()

三、getXY

//返回元素當前頁面座標的位置。元素必須是屬於DOM樹中的一部分才擁有正確的頁面座標（display:none或未加入的elements返回false）。 
var arrayXY = Ext.fly('id').getXY() // arrayXY是數組

四、setX

//返回元素相對於頁面座標的X位置。元素必須是屬於DOM樹中的一部分才擁有正確的頁面座標（display:none或未加入的elements返回false）。 
Ext.fly('id').setX(10)

五、setY

//返回元素相對於頁面座標的Y位置。元素必須是屬於DOM樹中的一部分才擁有正確的頁面座標（display:none或未加入的elements返回false）。
Ext.fly('id').setY(10)

六、setXY

//返回元素當前頁面座標的位置。元素必須是屬於DOM樹中的一部分才擁有正確的頁面座標（display:none或未加入的elements返回false）。 
Ext.fly('id').setXY([20,10])

七、getOffsetsTo

//返回當前元素與送入元素的距離。這兩個元素都必須是屬於DOM樹中的一部分才擁有正確的頁面座標（display:none或未加入的elements返回false）。 
var offsets = Ext.fly('id').getOffsetsTo(anotherEl);

八、getLeft

//獲取左邊的X座標。 
var left = Ext.fly('id').getLeft();

九、getRight

//獲取元素右邊的X座標（元素X位置 + 元素寬度）。 
var right = Ext.fly('id').getRight();

十、getTop

//獲取頂部Y座標。 
var top = Ext.fly('id').getTop();

十一、getBottom

//獲取元素的底部Y座標（元素Y位置 + 元素寬度）。 
var bottom = Ext.fly('id').getBottom();

十二、setLeft

//直接使用CSS樣式（代替setX()），設定元素的left位置。 
Ext.fly('id').setLeft(25)

1三、setRight

//設置元素CSS Right的樣式。 
Ext.fly('id').setRight(15)

1四、setTop

//直接使用CSS樣式（代替setY()），設定元素的top位置。 
Ext.fly('id').setTop(12)

1五、setBottom

//設置元素CSS Bottom的樣式。 
Ext.fly('id').setBottom(15)

1六、setLocation

//不管這個元素如何定位，設置其在頁面的座標位置。元素必須是DOM樹中的一部分才擁有頁面座標（display:none或未加入的elements會看成無效而返回false）。 
Ext.fly('id').setLocation(15,32)

1七、moveTo

//不管這個元素如何定位，設置其在頁面的座標位置。元素必須是DOM樹中的一部分才擁有頁面座標（display:none或未加入的elements會看成無效而返回false）。 
Ext.fly('id').moveTo(12,17)

1八、position

//初始化元素的位置。若是未傳入期待的位置，而又還沒定位的話，將會設置當前元素爲相對（relative）定位。 
Ext.fly('id').position("relative")

1九、clearPositioning

//當文檔加載後清除位置並復位到默認。 
Ext.fly('id').clearPositioning() 
Ext.fly('id').clearPositioning("top")

20、getPositioning

//返回一個包含CSS定位信息的對象。有用的技巧：連同setPostioning一塊兒，可在更新執行以前，先作一個快照（snapshot），以後即可恢復該元素。 
var positions = Ext.fly('id').getPositioning()

2一、setPositioning

//由getPositioning()返回的對象去進行定位。 
Ext.fly('id').setPositioning({ 
    left: 'static', 
    right: 'auto' 
})

2二、translatePoints

//送入一個頁面座標的參數，將其翻譯到元素的CSS left/top值。 
// {left:translX, top: translY} 
var points = Ext.fly('id').translatePoints(15,18);

4、尺寸&大小

一、getHeight

//返回元素的偏移（offset）高度。 
var height = Ext.fly('id').getHeight();

二、getWidth

//返回元素的偏移（offset）寬度。 
var width = Ext.fly('id').getWidth();

三、setHeight

//設置元素的高度。 
Ext.fly('id').setHeight();

四、setWidth

//設置元素的寬度。 
Ext.fly('id').setWidth();

五、getBorderWidth

//返回指定邊（side(s)）的padding寬度。 
var borderWidth = Ext.fly('elId').getBorderWidth('lr');

六、getPadding

//能夠是t, l, r, b或是任何組合。例如，傳入lr的參數會獲得left padding +(r)ight padding。 
var padding = Ext.fly('id').getPadding('lr');

七、clip

//保存當前的溢出（overflow），而後進行裁剪元素的溢出部分 - 使用unclip()來移除。 
Ext.fly('id').clip();

八、unclip

//在調用clip()以前，返回原始的裁剪部分（溢出的）。 
Ext.fly('id').unclip();

九、isBorderBox

//測試不一樣的CSS規則/瀏覽器以肯定該元素是否使用Border Box。 
if (Ext.isBorderBox) { 
     
}