ExtJs使用總結(jié)(非常詳細(xì))
2024-05-06 14:22:12
供稿：網(wǎng)友
一、獲取元素（Getting Elements）
1.Ext.get
var el = Ext.get('myElementId');//獲取元素，等同于document.getElementById('myElementId');//會緩存
2. Ext.fly
var el = Ext.fly('myElementId')//不需要緩存。
注：享元模式（Flyweight Design Pattern）是一種節(jié)省內(nèi)存的模式，該模式的大概原理是建立單個全體對象然后不斷反復(fù)使用它。
3.Ext.getDom
var elDom = Ext.getDom('elId'); // 依據(jù)id來查dom節(jié)點
var elDom1 = Ext.getDom(elDom); // 依據(jù)dom節(jié)點來查dom節(jié)點
二、CSS元素
4.addClass
Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的樣式
5.radioClass
Ext.fly('elId').radioClass('myCls');//添加一個或多個className到這個元素，并移除其所有側(cè)邊（siblings）節(jié)點上的同名樣式。
6.removeClass
Ext.fly('elId').removeClass('myCls'); // 移除元素的樣式
7.toggleClass
Ext.fly('elId').toggleClass('myCls'); // 加入樣式
Ext.fly('elId').toggleClass('myCls'); // 移除樣式
Ext.fly('elId').toggleClass('myCls'); // 再加入樣式
8.hasClass
if (Ext.fly('elId').hasClass('myCls')) {//判斷是否已加上這個樣式
// 是有樣式的……
}
10.replaceClass
Ext.fly('elId').replaceClass('myClsA', 'myClsB');//替換樣式
11.getStyle
var color = Ext.fly('elId').getStyle('color');//返回該元素的統(tǒng)一化當(dāng)前樣式和計算樣式。
var zIndx = Ext.fly('elId').getStyle('z-index');//返回該元素的統(tǒng)一化當(dāng)前樣式和計算樣式。
12.setStyle
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'
});//設(shè)置元素的樣式，也可以用一個對象參數(shù)包含多個樣式。
13.getColor
Ext.fly('elId').getColor('color');//為指定的CSS屬性返回CSS顏色
14.setOpacity
Ext.fly('elId').setOpacity(.45, true);//設(shè)置元素的透明度。
15.clearOpacity
Ext.fly('elId').clearOpacity();//清除這個元素的透明度設(shè)置
三、Dom游歷
16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red');
17.is 測試當(dāng)前元素是否與傳入的選擇符相符一致。
代碼如下:
var el = Ext.get('elId');
if (el.is('p.myCls')) {
// 條件成立
}
18.findParent
定位于此節(jié)點，以此節(jié)點為起點，向外圍搜索外層的父節(jié)點，搜索條件必須符合并匹配傳入的簡易選擇符。
Ext.fly('elId').findParent('div'); // 返回dom節(jié)點
Ext.fly('elId').findParent('div', 4); // 查找4個節(jié)點
Ext.fly('elId').findParent('div', null, true); // 返回Ext.Element
19.findParentNode
定位于此節(jié)點的“父節(jié)點”，以此節(jié)點的“父節(jié)點”為起點，向外圍搜索外層的“父父”節(jié)點，搜索條件必須符合并匹配傳入的簡易選擇符。
Ext.fly('elId').findParentNode('div');
20.up
沿著DOM，向外圍搜索外層的“父父”節(jié)點，搜索條件必須符合并匹配傳入的簡易選擇符。
