Extjs的一些基本運用!

一、獵取元素(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節點 

二、操縱class類名

1、addClass()

Ext.fly('id').addClass('className'); // 到場元素的'className'的款式 

2、removeClass()

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

3、toggleClass()

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

4、replaceClass()

Ext.fly('id').replaceClass('className1', 'className2');//替代款式     

5、radioClass()

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

6、hasClass()

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

7、getStyle()

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

8、setStyle()

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

9、getColor()

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

10、setOpacity()

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

11、clearOpacity

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

三、定位(position)

1、getX

//返回元素相對於頁面坐標的X位置。元素必需是屬於DOM樹中的一部份才具有準確的頁面坐標(display:none            或未到場的elements返回false)。 
var pageX = Ext.fly('id').getX() 

2、getY

//返回元素相對於頁面坐標的Y位置。元素必需是屬於DOM樹中的一部份才具有準確的頁面坐標(display:none或未到場的elements返回false)。 
var pageY = Ext.fly('id').getY() 

3、getXY

//返回元素當前頁面坐標的位置。元素必需是屬於DOM樹中的一部份才具有準確的頁面坐標(display:none或未到場的elements返回false)。 
var arrayXY = Ext.fly('id').getXY() // arrayXY是數組 

4、setX

//返回元素相對於頁面坐標的X位置。元素必需是屬於DOM樹中的一部份才具有準確的頁面坐標(display:none或未到場的elements返回false)。 
Ext.fly('id').setX(10) 

5、setY

//返回元素相對於頁面坐標的Y位置。元素必需是屬於DOM樹中的一部份才具有準確的頁面坐標(display:none或未到場的elements返回false)。
Ext.fly(‘id’).setY(10)

6、setXY

//返回元素當前頁面坐標的位置。元素必需是屬於DOM樹中的一部份才具有準確的頁面坐標(display:none或未到場的elements返回false)。 
Ext.fly('id').setXY([20,10]) 

7、getOffsetsTo

//返回當前元素與送入元素的間隔。這兩個元素都必需是屬於DOM樹中的一部份才具有準確的頁面坐標(display:none或未到場的elements返回false)。 
var offsets = Ext.fly('id').getOffsetsTo(anotherEl); 

8、getLeft

//獵取左側的X坐標。 
var left = Ext.fly('id').getLeft(); 

9、getRight

//獵取元素右側的X坐標(元素X位置 + 元素寬度)。 
var right = Ext.fly('id').getRight(); 

10、getTop

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

11、getBottom

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

12、setLeft

//直接運用CSS款式(替代setX()),設定元素的left位置。 
Ext.fly('id').setLeft(25) 

13、setRight

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

14、setTop

//直接運用CSS款式(替代setY()),設定元素的top位置。 
Ext.fly('id').setTop(12) 

15、setBottom

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

16、setLocation

//不管這個元素怎樣定位,設置其在頁面的坐標位置。元素必需是DOM樹中的一部份才具有頁面坐標(display:none或未到場的elements會看成無效而返回false)。 
Ext.fly('id').setLocation(15,32) 

17、moveTo

//不管這個元素怎樣定位,設置其在頁面的坐標位置。元素必需是DOM樹中的一部份才具有頁面坐標(display:none或未到場的elements會看成無效而返回false)。 
Ext.fly('id').moveTo(12,17) 

18、position

//初始化元素的位置。假如未傳入期待的位置,而又還沒定位的話,將會設置當前元素為相對(relative)定位。 
Ext.fly('id').position("relative") 

19、clearPositioning

//當文檔加載后消滅位置並複位到默許。 
Ext.fly('id').clearPositioning() 
Ext.fly('id').clearPositioning("top") 

20、getPositioning

//返回一個包括CSS定位信息的對象。有效的技能:連同setPostioning一同,可在更新實行之前,先做一個快照(snapshot),以後便可恢復該元素。 
var positions = Ext.fly('id').getPositioning() 

21、setPositioning

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

22、translatePoints

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

四、尺寸&大小

1、getHeight

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

2、getWidth

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

3、setHeight

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

4、setWidth

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

5、getBorderWidth

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

6、getPadding

//可所以t, l, r, b或是任何組合。比方,傳入lr的參數會獲得left padding +(r)ight padding。 
var padding = Ext.fly('id').getPadding('lr'); 

7、clip

//保留當前的溢出(overflow),然後舉行裁剪元素的溢出部份 - 運用unclip()來移除。 
Ext.fly('id').clip(); 

8、unclip

//在挪用clip()之前,返回原始的裁剪部份(溢出的)。 
Ext.fly('id').unclip(); 

9、isBorderBox

//測試差別的CSS劃定規矩/瀏覽器以肯定該元素是不是運用Border Box。 
if (Ext.isBorderBox) { 
     
} 
    原文作者:playboy5566
    原文地址: https://segmentfault.com/a/1190000015237152
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞