一、獲取元素（Getting Elements）
1.Ext.get
var el = Ext.get('myElementId');//獲取元素，等同于document.getElementById('myElementId');//會(huì)緩存
2. Ext.fly
var el = Ext.fly('myElementId')//不需要緩存。
注：享元模式（Flyweight Design Pattern）是一種節(jié)省內(nèi)存的模式，該模式的大概原理是建立單個(gè)全體對(duì)象然后不斷反復(fù)使用它。
3.Ext.getDom
var elDom = Ext.getDom('elId'); // 依據(jù)id來查dom節(jié)點(diǎn)
var elDom1 = Ext.getDom(elDom); // 依據(jù)dom節(jié)點(diǎn)來查dom節(jié)點(diǎn)

二、CSS元素
4.addClass
Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的樣式
5.radioClass
Ext.fly('elId').radioClass('myCls');//添加一個(gè)或多個(gè)className到這個(gè)元素，并移除其所有側(cè)邊（siblings）節(jié)點(diǎn)上的同名樣式。
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')) {//判斷是否已加上這個(gè)樣式
// 是有樣式的……
}
10.replaceClass
Ext.fly('elId').replaceClass('myClsA', 'myClsB');//替換樣式
11.getStyle
var color = Ext.fly('elId').getStyle('color');//返回該元素的統(tǒng)一化當(dāng)前樣式和計(jì)算樣式。
var zIndx = Ext.fly('elId').getStyle('z-index');//返回該元素的統(tǒng)一化當(dāng)前樣式和計(jì)算樣式。
12.setStyle
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'
});//設(shè)置元素的樣式，也可以用一個(gè)對(duì)象參數(shù)包含多個(gè)樣式。
13.getColor
Ext.fly('elId').getColor('color');//為指定的CSS屬性返回CSS顏色
14.setOpacity

Ext.fly('elId').setOpacity(.45, true);//設(shè)置元素的透明度。
15.clearOpacity
Ext.fly('elId').clearOpacity();//清除這個(gè)元素的透明度設(shè)置


三、Dom游歷
16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red');
17.is 測(cè)試當(dāng)前元素是否與傳入的選擇符相符一致。

18.findParent
定位于此節(jié)點(diǎn)，以此節(jié)點(diǎn)為起點(diǎn)，向外圍搜索外層的父節(jié)點(diǎn)，搜索條件必須符合并匹配傳入的簡(jiǎn)易選擇符。
Ext.fly('elId').findParent('div'); // 返回dom節(jié)點(diǎn)
Ext.fly('elId').findParent('div', 4); // 查找4個(gè)節(jié)點(diǎn)
Ext.fly('elId').findParent('div', null, true); // 返回Ext.Element
19.findParentNode
定位于此節(jié)點(diǎn)的“父節(jié)點(diǎn)”，以此節(jié)點(diǎn)的“父節(jié)點(diǎn)”為起點(diǎn)，向外圍搜索外層的“父父”節(jié)點(diǎn)，搜索條件必須符合并匹配傳入的簡(jiǎn)易選擇符。
Ext.fly('elId').findParentNode('div');
20.up
沿著DOM，向外圍搜索外層的“父父”節(jié)點(diǎn)，搜索條件必須符合并匹配傳入的簡(jiǎn)易選擇符。
Ext.fly('elId').up('div');
Ext.fly('elId').up('div', 5); // 限5層的內(nèi)查找
21.select
傳入一個(gè)CSS選擇符的參數(shù)，然后依據(jù)該CSS選擇符從當(dāng)前元素下面，形成期待匹配子節(jié)點(diǎn)的集合，也就是“選擇”的操作，最后以一個(gè)Ext.CompositeElement類型的組合元素的形式返回。如果以Ext.select()調(diào)用表示從document可是搜索。
// 返回結(jié)果的CompositeElement
Ext.fly('elId').select('div:nth-child(2)');
// 返回?cái)?shù)組
Ext.fly('elId').select('div:nth-child(2)',
true);
// 整個(gè)document都會(huì)搜索
Ext.select('div:nth-child(2)');
22.query
進(jìn)行一次query的查詢，返回DOM 節(jié)點(diǎn)組成的數(shù)組?？蛇x地第二參數(shù)設(shè)置為查詢的起點(diǎn)，如不指定則為 document。
// 返回dom節(jié)點(diǎn)組成的數(shù)組
Ext.query('div:nth-child(2)');
23.child
基于送入的選擇符，不限定深度進(jìn)行搜索，符合的話選取單個(gè)子節(jié)點(diǎn)。
Ext.fly('elId').child('p.highlight'); // 返回的類型是Ext.Element
Ext.fly('elId').child('p.highlight', true); // 返回dom節(jié)點(diǎn)
24.down
基于該選擇符，"直接"選取單個(gè)子節(jié)點(diǎn)。
Ext.fly('elId').down('span'); // 返回的類型是Ext.Element
Ext.fly('elId').down('span', true); // 返回dom節(jié)點(diǎn)

25.parent
返回當(dāng)前節(jié)點(diǎn)的那個(gè)父節(jié)點(diǎn)，可選地可送入一個(gè)期待的選擇符。
// 返回父節(jié)點(diǎn)，類型是Ext.Element
Ext.fly('elId').parent();
// 返回父節(jié)點(diǎn)，類型是html dom
Ext.fly('elId').parent("", true);
// 返回父級(jí)節(jié)點(diǎn)，但一定要是div的，找到就返回，類型是Ext.Element
Ext.fly('elId').parent("div");
26.next
獲取下一個(gè)側(cè)邊節(jié)點(diǎn)，跳過文本節(jié)點(diǎn)?？蛇x地可送入一個(gè)期待的選擇符。
// 返回下一個(gè)側(cè)邊節(jié)點(diǎn)，類型是Ext.Element
Ext.fly('elId').next();
// 返回下一個(gè)側(cè)邊節(jié)點(diǎn)，類型是html dom
Ext.fly('elId').next("", true);
// 返回下一個(gè)側(cè)邊節(jié)點(diǎn)，但一定要是div的，找到就返回，類型是Ext.Element
Ext.fly('elId').next("div");
27.prev
獲取上一個(gè)側(cè)邊節(jié)點(diǎn)，跳過文本節(jié)點(diǎn)?？蛇x地可送入一個(gè)期待的選擇符。
// 返回上一個(gè)側(cè)邊節(jié)點(diǎn)，類型是Ext.Element
Ext.fly('elId').prev();
// 返回上一個(gè)側(cè)邊節(jié)點(diǎn)，類型是html dom
Ext.fly('elId').prev("", true);
// 返回上一個(gè)側(cè)邊節(jié)點(diǎn)，但一定要是div的，找到就返回，類型是Ext.Element
Ext.fly('elId').prev("div");
28.first
獲取第一個(gè)側(cè)邊節(jié)點(diǎn)，跳過文本節(jié)點(diǎn)。可選地可送入一個(gè)期待的選擇符。
// 返回第一個(gè)側(cè)邊節(jié)點(diǎn)，類型是Ext.Element
Ext.fly('elId').first();
// 返回第一個(gè)側(cè)邊節(jié)點(diǎn)，類型是html dom
Ext.fly('elId').first("", true);
// 返回第一個(gè)側(cè)邊節(jié)點(diǎn)，但一定要是div的，找到就返回，類型是Ext.Element
Ext.fly('elId').first("div");
29.last
獲取最后一個(gè)側(cè)邊節(jié)點(diǎn)，跳過文本節(jié)點(diǎn)?？蛇x地可送入一個(gè)期待的選擇符。
// 返回最后一個(gè)側(cè)邊節(jié)點(diǎn)，類型是Ext.Element
Ext.fly('elId').last();
// 返回最后一個(gè)側(cè)邊節(jié)點(diǎn)，類型是html dom
Ext.fly('elId').last("", true);
// 返回最后一個(gè)側(cè)邊節(jié)點(diǎn)，但一定要是div的，找到就返回，類型是Ext.Element
Ext.fly('elId').last("div");

四、DOM操控（DHTML常見的一項(xiàng)任務(wù)就是DOM元素的增、刪、改、查）
30.appendChild
把送入的元素歸為這個(gè)元素的子元素。
var el = Ext.get('elId1');
// 用id指定
Ext.fly('elId').appendChild('elId2');
// Ext.Element添加
Ext.fly('elId').appendChild(el);
// 選擇符組合地添加
Ext.fly('elId').appendChild(['elId2','elId3']);
// 直接添加dom節(jié)點(diǎn)
Ext.fly('elId').appendChild(el.dom);
// 添加CompositeElement，一組的div
Ext.fly('elId').appendChild(Ext.select('div'));
31.appendTo
把這個(gè)元素添加到送入的元素里面。
var el = Ext.get('elId1');
// 'elId'添加到'elId2'里面
Ext.fly('elId').appendTo('elId2');
Ext.fly('elId').appendTo(el); //
添加到Ext.Element el
32.insertBefore
傳入一個(gè)元素的參數(shù)，將其放置在當(dāng)前元素之前的位置。
var el = Ext.get('elId1');
// dom節(jié)點(diǎn)在前面插入
Ext.fly('elId').insertBefore('elId2');
//Ext.Element el在前面插入
Ext.fly('elId').insertBefore(el);
33.insertAfter
傳入一個(gè)元素的參數(shù)，將其放置在當(dāng)前元素之后的位置。
var el = Ext.get('elId1');
// dom節(jié)點(diǎn)在后面插入
Ext.fly('elId').insertAfter('elId2');
// Ext.Element el在后面插入
Ext.fly('elId').insertAfter(el);
34.insertFirst
可以是插入一個(gè)元素，也可以是創(chuàng)建一個(gè)元素（要?jiǎng)?chuàng)建的話請(qǐng)使用“DomHelper配置項(xiàng)對(duì)象”作為參數(shù)傳入），總之，這個(gè)元素作為當(dāng)前元素的第一個(gè)子元素出現(xiàn)。
var el = Ext.get('elId1');
// 插入的dom節(jié)點(diǎn)作為第一個(gè)元素
Ext.fly('elId').insertFirst('elId2');
// 插入的Ext.Element作為第一個(gè)元素
Ext.fly('elId').insertFirst(el);
// 用DomHelper配置項(xiàng)創(chuàng)建新節(jié)點(diǎn)，新節(jié)點(diǎn)會(huì)作為第一個(gè)子元素被插入。
Ext.fly('elId').insertFirst({
tag: 'p',
cls: 'myCls',
html: 'Hi I am the new first child'
});
35.replace
用于當(dāng)前這個(gè)元素替換傳入的元素。
var el = Ext.get('elId1');
// 'elId'去替換'elId2'
Ext.fly('elId').replace('elId2');
// 'elId'去替換'elId1'
Ext.fly('elId').replace(el);
36.replaceWith
用傳入的元素替換這個(gè)元素。參數(shù)可以是新元素或是要?jiǎng)?chuàng)建的DomHelper配置項(xiàng)對(duì)象。
var el = Ext.get('elId1');
Ext.fly('elId').replaceWith('elId2'); // 'elId2'替換掉'elId'.
Ext.fly('elId').replaceWith(el); //
'elId1'替換掉'elId'
// 用DomHelper配置項(xiàng)創(chuàng)建新節(jié)點(diǎn)，并用該節(jié)點(diǎn)換掉‘elId'。
Ext.fly('elId').replaceWith({
tag: 'p',
cls: 'myCls',
html: 'Hi I have replaced elId'
});


五、DomHelper配置項(xiàng)
37.createChild
傳入一個(gè)DomHelper配置項(xiàng)對(duì)象的參數(shù)，將其創(chuàng)建并加入到該元素。
var el = Ext.get('elId');
var dhConfig = {
tag: 'p',
cls: 'myCls',
html: 'Hi I have replaced elId'
};
// 創(chuàng)建新的節(jié)點(diǎn)，放到'elId'里面
el.createChild(dhConfig);
// 創(chuàng)建新的節(jié)點(diǎn)，居el第一個(gè)子元素之前
el.createChild(dhConfig, el.first());
38.wrap
創(chuàng)建一個(gè)新的元素，包裹在當(dāng)前元素外面。
Ext.fly('elId').wrap(); // div包著elId
// 用新建的一個(gè)元素來包著elId
Ext.fly('elId').wrap({
tag: 'p',
cls: 'myCls',
html: 'Hi I have replaced elId'
});

六、Html片斷
38.insertHtml
插入HTML片斷到這個(gè)元素。至于要插入的html放在元素的哪里，你可指定beforeBegin, beforeEnd, afterBegin, afterEnd這幾種。第二個(gè)參數(shù)是插入HTML片斷，第三個(gè)參數(shù)是決定是否返回一個(gè)Ext.Element類型的DOM對(duì)象。
Ext.fly('elId').insertHtml(
'beforeBegin',
'<p><a href="anotherpage.html'>點(diǎn)擊我</a></p>'
); // 返回dom節(jié)點(diǎn)
Ext.fly('elId').insertHtml(
'beforeBegin',
'<p><a href="anotherpage.html'>點(diǎn)擊我</a></p>',
true
); // 返回Ext.Element
39.remove
從DOM里面移除當(dāng)前元素，并從緩存中刪除。.
Ext.fly('elId').remove(); //
elId在緩存和dom里面都沒有
40.removeNode
移除document的DOM節(jié)點(diǎn)。如果是body節(jié)點(diǎn)的話會(huì)被忽略。
Ext.removeNode(node); // 從dom里面移除(HTMLElement)


七、Ajax
41.load
直接訪問Updater的Ext.Updater.update()方法（相同的參數(shù)）。參數(shù)與Ext.Updater.update()方法的一致。
Ext.fly('elId').load({url: 'serverSide.php'})
42.getUpdater
獲取這個(gè)元素的UpdateManager。
var updr = Ext.fly('elId').getUpdater();
updr.update({
url: 'http://myserver.com/index.php',
params: {
param1: "foo",
param2: "bar"
}
});

八、事件控制Event Handling
43.addListener/on
為此元素加入一個(gè)事件處理函數(shù)。on()是其簡(jiǎn)寫方式。簡(jiǎn)寫方式作用等價(jià)，寫代碼時(shí)更省力。
var el = Ext.get('elId');
el.on('click', function(e,t) {
// e是一個(gè)標(biāo)準(zhǔn)化的事件對(duì)象(Ext.EventObject)
// t就是點(diǎn)擊的目標(biāo)元素，這是個(gè)Ext.Element.
// 對(duì)象指針this也指向t
});
44.removeListener/un
從這個(gè)元素上移除一個(gè)事件處理函數(shù)。un()是它的簡(jiǎn)寫方式。
var el = Ext.get('elId');
el.un('click', this.handlerFn);
// 或
el.removeListener('click', this.handlerFn);
45.Ext.EventObject
EventObject呈現(xiàn)了統(tǒng)一各瀏覽器的這么一個(gè)事件模型，并盡量符合W3C的標(biāo)準(zhǔn)方法。
// e它不是一個(gè)標(biāo)準(zhǔn)的事件對(duì)象，而是Ext.EventObject。
function handleClick(e){
e.preventDefault();
var target = e.getTarget();
...
}
var myDiv = Ext.get('myDiv');
myDiv.on("click", handleClick);
// 或
Ext.EventManager.on('myDiv', 'click', handleClick);
Ext.EventManager.addListener('myDiv', 'click', handleClick);

九、高級(jí)事件功能
46.委托delegation
要使用事件委托的方式代替，在容器身上登記一個(gè)事件處理器，按照依附的邏輯選擇：
Ext.fly('actions').on('click, function(e,t) {
switch(t.id) {
case ''btn-edit':
// 處理特定元素的事件具體過程
break;
case 'btn-delete':
// 處理特定元素的事件具體過程
break;
case 'btn-cancel':
// 處理特定元素的事件具體過程
break;
}
});

47.委托化delegate
你在登記事件的處理器的時(shí)候可以加入配置這個(gè)選項(xiàng)。一個(gè)簡(jiǎn)易選擇符，用于過濾目標(biāo)元素，或是往下一層查找目標(biāo)的子孫。
el.on('click', function(e,t) {
// 執(zhí)行事件具體過程
}, this, {
// 對(duì)子孫'clickable'有效
delegate: '.clickable'
});
48.翻轉(zhuǎn)hover
這是一個(gè)Ext的翻轉(zhuǎn)菜單的實(shí)例：
// handles when the mouse enters the element
function enter(e,t){
t.toggleClass('red');
}
// handles when the mouse leaves the element
function leave(e,t){
t.toggleClass('red');
}
// subscribe to the hover
el.hover(over, out);
49.移除事件句柄removeAllListeners
在該元素身上移除所有已加入的偵聽器。
el.removeAllListeners();
50.是否一次性觸發(fā)single
你在登記事件的處理器的時(shí)候可以加入配置這個(gè)選項(xiàng)。true代表為事件觸發(fā)后加入一個(gè)下次移除本身的處理函數(shù)。
el.on('click', function(e,t) {
// 執(zhí)行事件具體過程
}, this, {
single: true // 觸發(fā)一次后不會(huì)再執(zhí)行事件了
});
51.緩沖buffer
你在登記事件的處理器的時(shí)候可以加入配置這個(gè)選項(xiàng)。若指定一個(gè)毫秒數(shù)會(huì)把該處理函數(shù)安排到Ext.util.DelayedTask延時(shí)之后才執(zhí)行。如果事件在那個(gè)事件再次觸發(fā)，則原處理器句柄將不會(huì)被啟用，但是新處理器句柄會(huì)安排在其位置。
el.on('click', function(e,t) {
// 執(zhí)行事件具體過程
}, this, {
buffer: 1000 // 重復(fù)響應(yīng)事件以一秒為時(shí)間間隔
});
52.延時(shí)delay
你在登記事件的處理器的時(shí)候可以加入配置這個(gè)選項(xiàng)。制定觸發(fā)事件后處理函數(shù)延時(shí)執(zhí)行的時(shí)間。
el.on('click', function(e,t) {
// 執(zhí)行事件具體過程
}, this, {
// 延遲事件，響應(yīng)事件后開始計(jì)時(shí)（這里一秒）
delay: 1000
});
53.目標(biāo)target
你在登記事件的處理器的時(shí)候可以加入配置這個(gè)選項(xiàng)。如果你想另外指定另外一個(gè)目標(biāo)元素，你可以在這個(gè)配置項(xiàng)上面設(shè)置。這可保證在事件上報(bào)階段中遇到這個(gè)元素才會(huì)執(zhí)行這個(gè)處理函數(shù)。


十、尺寸&大小
54.getHeight
返回元素的偏移（offset）高度。
var ht = Ext.fly('elId').getHeight();
55.getWidth
返回元素的偏移（offset）寬度。
var wd = Ext.fly('elId').getWidth();
56.setHeight
設(shè)置元素的高度。
Ext.fly('elId').setHeight();
57.setWidth
設(shè)置元素的寬度。
Ext.fly('elId').setWidth();
58.getBorderWidth
返回指定邊（side(s)）的padding寬度。
var bdr_wd = Ext.fly('elId').getBorderWidth('lr');
59.getPadding
可以是t, l, r, b或是任何組合。例如，傳入lr的參數(shù)會(huì)得到(l)eft padding +(r)ight padding。
var padding = Ext.fly('elId').getPadding('lr');
60.clip
保存當(dāng)前的溢出（overflow），然后進(jìn)行裁剪元素的溢出部分 - 使用unclip()來移除。
Ext.fly('elId').clip();
61.unclip
在調(diào)用clip()之前，返回原始的裁剪部分（溢出的）。
Ext.fly('elId').unclip();
62.isBorderBox
測(cè)試不同的CSS規(guī)則/瀏覽器以確定該元素是否使用Border Box。
if (Ext.isBorderBox) {
//
}

十一、定位

63.getX
返回元素相對(duì)于頁面坐標(biāo)的X位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標(biāo)（display:none或未加入的elements返回false）。
var elX = Ext.fly('elId').getX()
64.getY
返回元素相對(duì)于頁面坐標(biāo)的Y位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標(biāo)（display:none或未加入的elements返回false）。
var elY = Ext.fly('elId').getY()
65.getXY
返回元素當(dāng)前頁面坐標(biāo)的位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標(biāo)（display:none或未加入的elements返回false）。
var elXY = Ext.fly('elId').getXY() // elXY是數(shù)組
66.setX
返回元素相對(duì)于頁面坐標(biāo)的X位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標(biāo)（display:none或未加入的elements返回false）。
Ext.fly('elId').setX(10)
67.setY
返回元素相對(duì)于頁面坐標(biāo)的Y位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標(biāo)（display:none或未加入的elements返回false）。
Ext.fly('elId').setY(10)
68.setXY
返回元素當(dāng)前頁面坐標(biāo)的位置。元素必須是屬于DOM樹中的一部分才擁有正確的頁面坐標(biāo)（display:none或未加入的elements返回false）。
Ext.fly('elId').setXY([20,10])
69.getOffsetsTo
返回當(dāng)前元素與送入元素的距離。這兩個(gè)元素都必須是屬于DOM樹中的一部分才擁有正確的頁面坐標(biāo)（display:none或未加入的elements返回false）。
var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl);
70.getLeft
獲取左邊的X坐標(biāo)。
var elLeft = Ext.fly('elId').getLeft();
71.getRight
獲取元素右邊的X坐標(biāo)（元素X位置 + 元素寬度）。
var elRight = Ext.fly('elId').getRight();
72.getTop
獲取頂部Y坐標(biāo)。
var elTop = Ext.fly('elId').getTop();
73.getBottom
獲取元素的底部Y坐標(biāo)（元素Y位置 + 元素寬度）。
var elBottom = Ext.fly('elId').getBottom();
74.setLeft
直接使用CSS樣式（代替setX()），設(shè)定元素的left位置。
Ext.fly('elId').setLeft(25)
75.setRight
設(shè)置元素CSS Right的樣式。
Ext.fly('elId').setRight(15)
76.setTop
直接使用CSS樣式（代替setY()），設(shè)定元素的top位置。
Ext.fly('elId').setTop(12)
77.setBottom
設(shè)置元素CSS Bottom的樣式。
Ext.fly('elId').setBottom(15)
78.setLocation
無論這個(gè)元素如何定位，設(shè)置其在頁面的坐標(biāo)位置。元素必須是DOM樹中的一部分才擁有頁面坐標(biāo)（display:none或未加入的elements會(huì)當(dāng)作無效而返回false）。
Ext.fly('elId').setLocation(15,32)
79.moveTo
無論這個(gè)元素如何定位，設(shè)置其在頁面的坐標(biāo)位置。元素必須是DOM樹中的一部分才擁有頁面坐標(biāo)（display:none或未加入的elements會(huì)當(dāng)作無效而返回false）。
Ext.fly('elId').moveTo(12,17)
80.position
初始化元素的位置。如果未傳入期待的位置，而又還沒定位的話，將會(huì)設(shè)置當(dāng)前元素為相對(duì)（relative）定位。
Ext.fly('elId').position("relative")
81.clearPositioning
當(dāng)文檔加載后清除位置并復(fù)位到默認(rèn)。
Ext.fly('elId').clearPositioning()
Ext.fly('elId').clearPositioning("top")
82.getPositioning
返回一個(gè)包含CSS定位信息的對(duì)象。有用的技巧：連同setPostioning一起，可在更新執(zhí)行之前，先做一個(gè)快照（snapshot），之后便可恢復(fù)該元素。
var pos = Ext.fly('elId').getPositioning()
83.setPositioning
由getPositioning()返回的對(duì)象去進(jìn)行定位。
Ext.fly('elId').setPositioning({
left: 'static',
right: 'auto'
})
84.translatePoints
送入一個(gè)頁面坐標(biāo)的參數(shù)，將其翻譯到元素的CSS left/top值。
// {left:translX, top: translY}
var points = Ext.fly('elId').translatePoints(15,18);

最新評(píng)論