[轉]ExtJs基礎--Html DOM、Ext Element及Component三者之間的區別

要學習及應用好Ext框架，必須需要理解Html DOM、Ext Element及Component三者之間的區別。

 

 

每一個HTML頁面都有一個層次分明的DOM樹模型，瀏覽器中的所有內容都有相應的DOM對象，動態改變頁面的內容，正是通過使用腳本語言來操作DOM對象實現。(通常使用getElementById/Ext.getDOM獲得DOM對象)

 

 

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

 

 

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

 

Ext中 getDom、get、getCmp的區別

 

 

getDom方法能夠得到文檔中的DOM節點，該方法中包含一個參數，該參數可以是DOM節點的id、DOM節點對象或DOM節點對應的Ext元素(Element)等。 (與getElementById是一個效果)

Ext.onReady(function()
{var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});

 

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

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

?

get方法中只有一個參數，這個參數是混合參數，可以是DOM節點的id、也可以是一個Element、或者是一個DOM節點對象等。 get方法其實是Ext.Element.get的簡寫形式。?

?

Ext.onReady(function(){
var e=new Ext.Element("hello");?
Ext.get("hello"));
Ext.get(document.getElementById("hello"));
Ext.get(e);
});

 

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

Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三個方法都可以得到一個與DOM節點hello對應的Ext元素。

 

 

getCmp方法用來獲得一個Ext組件，也就是一個已經在頁面中初始化了的Component或其子類的對象，getCmp方法中只有一個參數，也就是組件的id。 getCmp方法其實是Ext.ComponentMgr.get方法的簡寫形式。

 

Ext.onReady(function(){
var myPanel=new Ext.Panel({id:“myFirstPanel”,?title:“舊的標題",renderTo:"hello",width:300, height:200?});
Ext.getCmp(" myFirstPanel ").setTitle("新的標題");
});

 

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

我們使用Ext.getCmp(“myFirstPanel").來得到id為myFirstPanel的組件，並調用其setTitle方法來設置該面板的標題。

 

 

DOM的增刪改查

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

 

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

 

CSS（如setStyle、addClass）

 

DOM操控（如createChild、remove）

 

方位、尺寸（如getHeight、getWidth）

 

 

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

 

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

query方法返回的是JavaScript標准的數組類型；
select方法返回的是CompositeElement類型，試比較：

 

 

alter(Ext.isArray(Ext.query(‘a.BigClass’))); //true
alter(Ext.query(‘a.BigClass’).length);//里面包含的元素個數

Ext.select('a.BigClass').each(function(i){
i.dom.href = 'javescript:void(0);'// 找到所有帶有BigClass樣式的A元素修改其鏈接
});

 

CompositeElement類型屬於Ext自定義的類型，簡單地說是以一個Ext.Element實例代表集合中多個元素，可實現 Element對象上所有的接口，也就是說CompositeElement在Ext中用於表示元素的集合中不論有多少個元素，均被視為一個單獨元素處 理。

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

 

 

DOM查詢---- DomQuery詳解

 

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

 

DomQuery主要有4種選擇方式：元素標記、元素屬性、偽對象、 CSS值

 

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

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

3.通過偽對象選擇，主要有以下18種語法。
（1）Ext.select('ul li:first-child'); //選擇所有ul下的第一個li子節點
（2）Ext.select('ul li:last-child'); //選擇所有ul下的最后一個li子節點
（3）Ext.select('ul li:nth-child(2)'); //選擇所有ul下的第2個li子節點
（4）Ext.select('ul li:nth-child(odd)'); //選擇所有ul下的奇數行li子節點
（5）Ext.select('ul li:nth-child(evan)'); //選擇所有ul下的偶數行li子節點
（6）Ext.select('ul li:only-child'); //選擇所有ul下只有一個子節點的li節點
（7）Ext.select('input:checked');//選擇所有checked屬性值為true的元素
（8）Ext.select('input:first'); //選擇第一個input元素
（9）Ext.select('input:last'); //選擇最后一個input元素
（10）E:nth(n)：選擇匹配的第n（n≥1）個元素E。其使用語法請看下面代碼。
 Ext.select('input:nth(2)'); //選擇第2個input元素
（11）E:odd：是語法“:nth-child(odd)”的簡寫。
（12）E:evan：是語法“:nth-child(evan)”的簡寫。
（13）Ext.select('div:contains(list)'); //選擇innerHTML屬性包含“list”的div
（14）Ext.select('div:nodeValue(test)'); //選擇包含文本節點且值為“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同層的下一個div
（18）Ext.select('div:prev(p)'); //選擇與包含p的div同層的下一個div

 

 

4.通過CSS值進行選擇。主要有以下6種語法。
（1）E:{display=none}：選擇display值為none的元素E。其使用語法請看下面代碼。
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結尾的元素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的語法可以單獨使用，也可以組合在一起使用，例如以下代碼：

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

 

如果沒有指定選擇器開始搜索的根節點，默認是從body節點開始，這就等於每次都要做全文搜索，其性能可想而知，是相當低效的，因此，建議大家在每次搜索時都指定搜索的根節點，減少搜索范圍。設置搜索根節點的語法請看下面代碼。

Ext.select('div',true, 'elId'); // elId為根節點id

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

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

 

操縱CSS

 

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

addClass輕松地為一個元素添加樣式：

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

radioClass添加一個或多個className到這個元素，並移除其所有側邊（siblings）節點上的同名樣式。

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

removeClass移除元素身上一個或多個的CSS類。

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

 

toggleClass輪換（Toggles，兩種狀態中轉換到一個狀態）--添加或移除指定的CSS類（如果已經存在的話便刪除，否則就是新增加）。

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

hasClass檢查某個CSS類是否作用於這個元素身上。

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

replaceClass在這個元素身上替換CSS類。

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

 

getStyle返回該元素的統一化當前樣式和計算樣式。

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

 

setStyle設置元素的樣式，也可以用一個對象參數包含多個樣式。
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); // 帶有動畫的變換過程
Ext.get(‘elId’).setStyle(‘color’, ‘#FFFFFF’, {duration: .75}); // 帶有0.75秒動畫變換過程

getColor為指定的CSS屬性返回CSS顏色。RGB、三位數(像#fff)和有效值都被轉換到標准六位十六進制的顏色。
Ext.get('elId').getColor('background-color');
Ext.get('elId').getColor('color');
Ext.get('elId').getColor('border-color'); // ... 等等

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

 

操縱DOM

 

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

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

Replace 用於當前這個元素替換傳入的元素。
Ext.get('elId').replace('elId2'); // 'elId'去替換'elId2‘

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

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

insertFirst 可以是插入一個元素，也可以是創建一個元素（要創建的話請使用“DomHelper配置項對象”作為參數傳入），這個元素將作為當前元素的第一個子元素出現。
 Ext.get(‘elId').insertFirst(el);
 // 用DomHelper配置項創建新節點
 Ext.get('elId').insertFirst({
 tag: 'p',
 cls: 'myCls',
 html: 'Hi I am the new first child'
 });

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

 

 

操縱DOM- - - -DOMHepler配置項

 

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

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

DomHelper是專用於動態生成裝飾元素的實用工具，已解決大多數瀏覽器之間差別的問題，避免了原始操作DOM腳本的麻煩。對於HTML片斷與innerHTML的操作， DomHelper經充分考慮並在性能上有足夠的優化。

Ext.DomHelper是一個單例，因此無須實例化即可調用其靜態方法:
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>');

 

尺寸&大小

 

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

// 設置高度為150px以自定義的配置進行動畫
Ext.get('elId').setHeight(150, {
duration : .5, // 動畫將會持續半秒
callback: function(){ this.update("結束");} // 動畫過后改變其內容為“結束”
});

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

 

定位

 

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

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

clearPositioning//當文檔加載后清除位置並復位到默認

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