要學(xué)習(xí)及應(yīng)用好Ext框架，必須需要理解Html DOM、Ext Element及Component三者之間的區(qū)別。

?

?

每一個(gè)HTML頁面都有一個(gè)層次分明的DOM樹模型，瀏覽器中的所有內(nèi)容都有相應(yīng)的DOM對(duì)象，動(dòng)態(tài)改變頁面的內(nèi)容，正是通過使用腳本語言來操作DOM對(duì)象實(shí)現(xiàn)。(通常使用getElementById/Ext.getDOM獲得DOM對(duì)象)

?

?

僅僅有DOM是不夠的，比如要把頁面中的某一個(gè)節(jié)點(diǎn)移到其它位置，要給某一個(gè)節(jié)點(diǎn)添加陰影效果，要隱藏或顯示某一個(gè)節(jié)點(diǎn)等，我們都需要通過幾句 javascript才能完成。因此，Ext在DOM的基礎(chǔ)上，創(chuàng)建了Ext Element，可以使用Element來包裝任何DOM，Element對(duì)象中添加了一系列快捷、簡(jiǎn)便的實(shí)用方法。(通常使用Ext.get獲得Element對(duì)象)

?

?

對(duì)于終端用戶來說，僅僅有Element是不夠的，比如用戶要顯示一個(gè)表格、要顯示一棵樹、要顯示一個(gè)彈出窗口等。因此，除了Element以外，Ext 還建立了一系列的客戶端界面組件Component，我們?cè)诰幊虝r(shí)，只要使用這些組件Componet即可實(shí)現(xiàn)相關(guān)數(shù)據(jù)展示及交互等，而 Component是較高層次的抽象，每一個(gè)組件在渲染render的時(shí)候，都會(huì)依次通過Element、DOM來生成最終的頁面效果。(通常使用Ext.getCmp獲得Component對(duì)象)

?

Ext中 getDom、get、getCmp的區(qū)別

?

?

getDom方法能夠得到文檔中的DOM節(jié)點(diǎn)，該方法中包含一個(gè)參數(shù)，該參數(shù)可以是DOM節(jié)點(diǎn)的id、DOM節(jié)點(diǎn)對(duì)象或DOM節(jié)點(diǎn)對(duì)應(yīng)的Ext元素(Element)等。 (與getElementById是一個(gè)效果)

Js代碼 ?

Ext.onReady(function()??

{var?e=new?Ext.Element("hello");??

Ext.getDom("hello");??

Ext.getDom(e);??

Ext.getDom(e.dom);??

});??

?

//Html頁面中包含一個(gè)id為hello的div，代碼如下：<div id="hello">aaa</div>?

在上面的代碼中，Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三個(gè)語句返回都是同一個(gè)DOM節(jié)點(diǎn)對(duì)象。?

?

get方法中只有一個(gè)參數(shù)，這個(gè)參數(shù)是混合參數(shù)，可以是DOM節(jié)點(diǎn)的id、也可以是一個(gè)Element、或者是一個(gè)DOM節(jié)點(diǎn)對(duì)象等。 get方法其實(shí)是Ext.Element.get的簡(jiǎn)寫形式。?

?

Js代碼 ?

Ext.onReady(function(){??

var?e=new?Ext.Element("hello");???

Ext.get("hello"));??

Ext.get(document.getElementById("hello"));??

Ext.get(e);??

});??

?

//Html頁面中包含一個(gè)id為hello的div，代碼如下：<div id="hello">aaa</div>?

Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三個(gè)方法都可以得到一個(gè)與DOM節(jié)點(diǎn)hello對(duì)應(yīng)的Ext元素。

?

?

getCmp方法用來獲得一個(gè)Ext組件，也就是一個(gè)已經(jīng)在頁面中初始化了的Component或其子類的對(duì)象，getCmp方法中只有一個(gè)參數(shù)，也就是組件的id。 getCmp方法其實(shí)是Ext.ComponentMgr.get方法的簡(jiǎn)寫形式。

?

Js代碼 ?

Ext.onReady(function(){??

var?myPanel=new?Ext.Panel({id:“myFirstPanel”,?title:“舊的標(biāo)題",renderTo:"hello",width:300,?height:200?});??

Ext.getCmp("?myFirstPanel?").setTitle("新的標(biāo)題");??

});??

?

//Html頁面中包含一個(gè)id為hello的div，代碼如下：<div id="hello">aaa</div>

我們使用Ext.getCmp(“myFirstPanel").來得到id為myFirstPanel的組件，并調(diào)用其setTitle方法來設(shè)置該面板的標(biāo)題。

?

?

DOM的增刪改查

Ext.Element占Ext Core庫的篇幅很大，其中方法就占據(jù)了大部分。因此我們將這些方法可分為下面幾類：

?

DOM查詢或遍歷（如query、select、findParent）

?

CSS（如setStyle、addClass）

?

DOM操控（如createChild、remove）

?

方位、尺寸（如getHeight、getWidth）

?

?

DOM查詢----Ext.query與Ext.select

?

Ext.query和Ext.select的作用同是根據(jù)CSS選擇符,基本的XPath,HTML屬性等查找出一個(gè)或多個(gè)元素。區(qū)別在于返回類型上。分別是：

query方法返回的是JavaScript標(biāo)準(zhǔn)的數(shù)組類型；
select方法返回的是CompositeElement類型，試比較：

?

?

Js代碼 ?

alter(Ext.isArray(Ext.query(‘a(chǎn).BigClass’)));?//true??

alter(Ext.query(‘a(chǎn).BigClass’).length);//里面包含的元素個(gè)數(shù)??

??

Ext.select('a.BigClass').each(function(i){??

i.dom.href?=?'javescript:void(0);'//?找到所有帶有BigClass樣式的A元素修改其鏈接??

});??

?

CompositeElement類型屬于Ext自定義的類型，簡(jiǎn)單地說是以一個(gè)Ext.Element實(shí)例代表集合中多個(gè)元素，可實(shí)現(xiàn) Element對(duì)象上所有的接口，也就是說CompositeElement在Ext中用于表示元素的集合中不論有多少個(gè)元素，均被視為一個(gè)單獨(dú)元素處 理。

它的用法和單個(gè)的Element對(duì)象一樣。select方法返回的結(jié)果可直接如同Element般地操作，一般比query方法常用。

?

?

DOM查詢---- DomQuery詳解

?

DomQuery是Ext Core提供的HTML或XML文檔選擇器，它支持大部分的CSS 3選擇器規(guī)則，同時(shí)提供了一些自定義方式.

?

DomQuery主要有4種選擇方式：元素標(biāo)記、元素屬性、偽對(duì)象、 CSS值

?

1.通過元素標(biāo)記選擇，主要有以下6種方法：
（1）*：選擇任何元素。其使用方法請(qǐng)看下面代碼。
?Ext.select('*');
（2）E：元素的標(biāo)記為E。其使用方法請(qǐng)看下面代碼。
?Ext.select('div');
（3）E F：選擇包含在標(biāo)記E中的標(biāo)記F。其使用方法請(qǐng)看下面代碼。
?Ext.select('div a');//將選擇div下的a元素
（4）E>F：選擇包含在標(biāo)記E中的直接子標(biāo)記F。其使用方法請(qǐng)看下面代碼。
?Ext.select('div>a');//將選擇div下的直接子元素a
（5）E+F：選擇所有緊接在元素E后的元素F。其使用方法請(qǐng)看下面代碼。
?Ext.select('div+a');//將選擇緊接在div下的元素a
（6）E~F：選擇所有緊接在元素E后的同層元素F。其使用方法請(qǐng)看下面代碼。
Ext.select('div～a');//將選擇緊接在div下的同層元素a

2.通過元素屬性選擇，主要有以下7種語法。
（1）E[foo]：選擇帶有屬性foo的元素。其使用語法請(qǐng)看下面代碼。
?Ext.select('div[id]');//選擇有id屬性的div元素
（2）E[foo=bar]：選擇foo的屬性值為bar的元素。其使用語法請(qǐng)看下面代碼。
?Ext.select('input[checked=true]');//選擇checked屬性值為true的元素
（3）E[foo^=bar]：選擇foo的屬性值以bar開頭的元素。其使用語法請(qǐng)看下面代碼。
?Ext.select('input[name^=form1]'); //選擇name屬性值以form1開頭的元素
（4）E[foo$=bar]：選擇foo的屬性值以bar結(jié)尾的元素。其使用語法請(qǐng)看下面代碼。
?Ext.select('input[name$=form1]'); //選擇name屬性值以form1結(jié)尾的元素
（5）E[foo*=bar]：選擇foo的屬性值包含字符串bar的元素。其使用語法請(qǐng)看下面代碼。
?Ext.select('input[name*=form1]'); //選擇name屬性值包含字符串form1的元素
（6）E[foo%=2]：選擇foo的屬性值能整除2的元素。其使用語法請(qǐng)看下面代碼。
?Ext.select('input[value%=2]'); //選擇value屬性值能整除2的元素
（7）E[foo!=bar]：選擇foo的屬性值不等于bar的元素。其使用語法請(qǐng)看下面代碼。
?Ext.select('input[name!=form1]'); //選擇name屬性值不等于form1的元素

3.通過偽對(duì)象選擇，主要有以下18種語法。
（1）Ext.select('ul li:first-child'); //選擇所有ul下的第一個(gè)li子節(jié)點(diǎn)
（2）Ext.select('ul li:last-child'); //選擇所有ul下的最后一個(gè)li子節(jié)點(diǎn)
（3）Ext.select('ul li:nth-child(2)'); //選擇所有ul下的第2個(gè)li子節(jié)點(diǎn)
（4）Ext.select('ul li:nth-child(odd)'); //選擇所有ul下的奇數(shù)行l(wèi)i子節(jié)點(diǎn)
（5）Ext.select('ul li:nth-child(evan)'); //選擇所有ul下的偶數(shù)行l(wèi)i子節(jié)點(diǎn)
（6）Ext.select('ul li:only-child'); //選擇所有ul下只有一個(gè)子節(jié)點(diǎn)的li節(jié)點(diǎn)
（7）Ext.select('input:checked');//選擇所有checked屬性值為true的元素
（8）Ext.select('input:first'); //選擇第一個(gè)input元素
（9）Ext.select('input:last'); //選擇最后一個(gè)input元素
（10）E:nth(n)：選擇匹配的第n（n≥1）個(gè)元素E。其使用語法請(qǐng)看下面代碼。
?Ext.select('input:nth(2)'); //選擇第2個(gè)input元素
（11）E:odd：是語法“:nth-child(odd)”的簡(jiǎn)寫。
（12）E:evan：是語法“:nth-child(evan)”的簡(jiǎn)寫。
（13）Ext.select('div:contains(list)'); //選擇innerHTML屬性包含“l(fā)ist”的div
（14）Ext.select('div:nodeValue(test)'); //選擇包含文本節(jié)點(diǎn)且值為“test”的div
（15）Ext.select('input:not(:checked)'); //選擇不包含checked屬性的input
（16）Ext.select('div:has(p)'); //選擇包含p的div
（17）Ext.select('div:next(p)'); //選擇與包含p的div同層的下一個(gè)div
（18）Ext.select('div:prev(p)'); //選擇與包含p的div同層的下一個(gè)div

?

?

4.通過CSS值進(jìn)行選擇。主要有以下6種語法。
（1）E:{display=none}：選擇display值為none的元素E。其使用語法請(qǐng)看下面代碼。
Ext.select('div:{display=none}'); //選擇display值為none的元素E
（2）Ext.select('div:{display^=none}'); //選擇display值以none開始的元素E
（3）Ext.select('div:{display$=none}'); //選擇display值以none結(jié)尾的元素E
（4）Ext.select('div:{display*=none}'); //選擇display值包含字符串none的元素E
（5）Ext.select('div:{display%=none}'); //選擇display值整除2的元素E
（6）Ext.select('div:{display!=none}'); //選擇display值不等于none的元素E

?

?

Domquery的語法可以單獨(dú)使用，也可以組合在一起使用，例如以下代碼：

Ext.select('div,span'); //選擇所有div元素與span元素
//選擇class為red，且是第1個(gè)子節(jié)點(diǎn)，display屬性為none的div
Ext.select('div.red:first-child[display=none]');

?

如果沒有指定選擇器開始搜索的根節(jié)點(diǎn)，默認(rèn)是從body節(jié)點(diǎn)開始，這就等于每次都要做全文搜索，其性能可想而知，是相當(dāng)?shù)托У?#xff0c;因此，建議大家在每次搜索時(shí)都指定搜索的根節(jié)點(diǎn)，減少搜索范圍。設(shè)置搜索根節(jié)點(diǎn)的語法請(qǐng)看下面代碼。

Ext.select('div',true, 'elId'); // elId為根節(jié)點(diǎn)id

//下面這句與上面的效果是一樣的

Ext.get('elid').select('div');

?

操縱CSS

?

Ext為我們提供了很多操縱CSS的方法.

addClass輕松地為一個(gè)元素添加樣式：

Ext.get('elId').addClass('myCls'); // 加入元素的'myCls'的樣式

radioClass添加一個(gè)或多個(gè)className到這個(gè)元素，并移除其所有側(cè)邊（siblings）節(jié)點(diǎn)上的同名樣式。

Ext.get('elId').radioClass('myCls');//為元素添加‘myCls’在所有側(cè)邊元素上刪除‘myCls’樣式

removeClass移除元素身上一個(gè)或多個(gè)的CSS類。

Ext.get('elId').removeClass('myCls'); // 移除元素的樣式

?

toggleClass輪換（Toggles，兩種狀態(tài)中轉(zhuǎn)換到一個(gè)狀態(tài)）--添加或移除指定的CSS類（如果已經(jīng)存在的話便刪除，否則就是新增加）。

Ext.get(‘elId’).toggleClass(‘myCls’); // 加入(移除,再加入)樣式 Ext.get('elId').toggleClass('myCls');

hasClass檢查某個(gè)CSS類是否作用于這個(gè)元素身上。

If (Ext.get(‘elId’).hasClass(‘myCls’)) {alert(‘是有樣式的’);}

replaceClass在這個(gè)元素身上替換CSS類。

Ext.get('elId').replaceClass('myClsA', 'myClsB');

?

getStyle返回該元素的統(tǒng)一化當(dāng)前樣式和計(jì)算樣式。

var color = Ext.get('elId').getStyle('color');
var zIndx = Ext.get('elId').getStyle('z-index');
var fntFmly = Ext.get('elId').getStyle('font-family'); // ... 等等

?

setStyle設(shè)置元素的樣式，也可以用一個(gè)對(duì)象參數(shù)包含多個(gè)樣式。
Ext.get('elId').setStyle('color', '#FFFFFF');
Ext.get('elId').setStyle('z-index', 10);
Ext.get('elId').setStyle({ display : 'block', overflow : 'hidden', cursor : 'pointer' });
Ext.get('elId').setStyle('color', '#FFFFFF', true); // 帶有動(dòng)畫的變換過程
Ext.get(‘elId’).setStyle(‘color’, ‘#FFFFFF’, {duration: .75}); // 帶有0.75秒動(dòng)畫變換過程

getColor為指定的CSS屬性返回CSS顏色。RGB、三位數(shù)(像#fff)和有效值都被轉(zhuǎn)換到標(biāo)準(zhǔn)六位十六進(jìn)制的顏色。
Ext.get('elId').getColor('background-color');
Ext.get('elId').getColor('color');
Ext.get('elId').getColor('border-color'); // ... 等等

setOpacity設(shè)置元素的透明度。
Ext.get('elId').setOpacity(.5);
Ext.get('elId').setOpacity(.45, true); // 動(dòng)畫
Ext.get('elId').setOpacity(.45, {duration: .5}); // 附有半秒的動(dòng)畫過程
clearOpacity清除這個(gè)元素的透明度設(shè)置。
Ext.get('elId').clearOpacity();

?

操縱DOM

?

appendChild 把送入的元素歸為這個(gè)元素的子元素。
var el = Ext.get('elId1');
Ext.get('elId').appendChild('elId2'); // 'elId2'添加到'elId'里面
Ext.get(‘elId’).appendChild(el); // 參數(shù)還可以是:[‘elId2’,‘elId3’],???? el.dom?? ,???? Ext.select(‘div’)

appendTo把這個(gè)元素添加到送入的元素里面。
Ext.get('elId').appendTo('elId2');// 'elId'添加到'elId2'里面

Replace 用于當(dāng)前這個(gè)元素替換傳入的元素。
Ext.get('elId').replace('elId2'); // 'elId'去替換'elId2‘

replaceWith 用傳入的元素替換這個(gè)元素
Ext.get('elId').replaceWith('elId2'); // 'elId2'替換掉'elId'.

insertBefore 傳入一個(gè)元素的參數(shù)，將其放置在當(dāng)前元素之前的位置
Ext.get('elId').insertBefore('elId2');

insertFirst 可以是插入一個(gè)元素，也可以是創(chuàng)建一個(gè)元素（要?jiǎng)?chuàng)建的話請(qǐng)使用“DomHelper配置項(xiàng)對(duì)象”作為參數(shù)傳入），這個(gè)元素將作為當(dāng)前元素的第一個(gè)子元素出現(xiàn)。
?Ext.get(‘elId').insertFirst(el);
?// 用DomHelper配置項(xiàng)創(chuàng)建新節(jié)點(diǎn)
?Ext.get('elId').insertFirst({
?tag: 'p',
?cls: 'myCls',
?html: 'Hi I am the new first child'
?});

remove從DOM里面移除當(dāng)前元素，并從緩存中刪除。
Ext.get('elId').remove(); // elId在緩存和dom里面都沒有

?

?

操縱DOM- - - -DOMHepler配置項(xiàng)

?

在上面的例子中，大家可能就注意到這樣的語法：
.insertFirst({
tag: 'p',
html: 'Hi I am the new first child'
});
insertFirst方法的那個(gè)參數(shù)作用是什么呢？參數(shù)就是要?jiǎng)?chuàng)建的裝飾元素(HTML元素)在DomHelper 中是怎么表示的，也就是DomHelper的配置選項(xiàng)，其配置項(xiàng)支持很多的HTML屬性，html片斷也行，至于html屬性就可以是Dom節(jié)點(diǎn)的很多屬性了（css class、url、src、id等）。

DomHelper配置可視作任何HTML元素的等價(jià)物.

DomHelper是專用于動(dòng)態(tài)生成裝飾元素的實(shí)用工具，已解決大多數(shù)瀏覽器之間差別的問題，避免了原始操作DOM腳本的麻煩。對(duì)于HTML片斷與innerHTML的操作， DomHelper經(jīng)充分考慮并在性能上有足夠的優(yōu)化。

Ext.DomHelper是一個(gè)單例，因此無須實(shí)例化即可調(diào)用其靜態(tài)方法:
markup, insertHtml , insertBefore , insertAfter , insertFirst , append ,overwrite

例1 :Ext.DomHelper.append('my-div', {tag:?'ul', cls:?'my-class'});
例2 :Ext.DomHelper.insertFirst('my-div', '<p>Hi</p>');

?

尺寸&大小

?

某個(gè)元素在頁面上，我們就想獲得到其尺寸大小或改變它的尺寸大小。毫無意外下，Ext Core也把這些任務(wù)抽象為清晰的API供大家使用。這些都是setter的方法，可傳入動(dòng)畫的配置參數(shù)，或即就是以個(gè)布爾型的true，表示
這是默認(rèn)的動(dòng)畫。
Ext.get('elId').setHeight(200, true); // 設(shè)置高度為200px以默認(rèn)配置進(jìn)行動(dòng)畫

// 設(shè)置高度為150px以自定義的配置進(jìn)行動(dòng)畫
Ext.get('elId').setHeight(150, {
duration : .5, // 動(dòng)畫將會(huì)持續(xù)半秒
callback: function(){ this.update("結(jié)束");} // 動(dòng)畫過后改變其內(nèi)容為“結(jié)束”
});

getHeight//返回元素的偏移（offset）高度。
getWidth//返回元素的偏移（offset）寬度。
setHeight//設(shè)置元素的高度。
setWidth//設(shè)置元素的寬度。
getBorderWidth//返回指定邊（side(s)）的padding寬度。
getPadding//可以是t, l, r, b或是任何組合。傳入lr的參數(shù)會(huì)得到leftpadding+right padding。
clip//保存當(dāng)前的溢出（overflow），然后進(jìn)行裁剪元素的溢出部分 使用unclip()來移除。
unclip//在調(diào)用clip()之前，返回原始的裁剪部分（溢出的）

?

定位

?

通過Ext Core定義的API能快速地采集元素位置的各方面數(shù)據(jù)，歸納為get的或set的方法，全部瀏覽器都可通用。類似于上一節(jié)的尺寸大小的API，多數(shù)的setter方法支持動(dòng)畫效果。可在第二參數(shù)中傳入動(dòng)畫的配置參數(shù)（object-literal configuration object），或即就是以個(gè)布爾型的true，
表示這是默認(rèn)的動(dòng)畫。

set/getX
set/getY
set/getXY
set/getOffsetsTo//返回當(dāng)前元素與送入元素的距離
var elOffsets = Ext.get('elId').getOffsetsTo(anotherEl);
set/getLeft
set/getRight
set/getTop
set/getBottom
setLocation//無論這個(gè)元素如何定位，設(shè)置其在頁面的坐標(biāo)位置。

clearPositioning//當(dāng)文檔加載后清除位置并復(fù)位到默認(rèn)

set/getPositioning//返回一個(gè)包含CSS定位信息的對(duì)象。有用的技巧：連同setPostioning
一起，可在更新執(zhí)行之前，先做一個(gè)快照（snapshot），之后便可恢復(fù)該元素

轉(zhuǎn)載于:https://www.cnblogs.com/dirgo/p/5476560.html

總結(jié)

以上是生活随笔為你收集整理的[转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。