要學習及應用好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是一個效果)

Js程式碼  

1. Ext.onReady(function()  
2. {var e=new Ext.Element("hello");  
3. Ext.getDom("hello");  
4. Ext.getDom(e);  
5. Ext.getDom(e.dom);  
6. });  

//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的簡寫形式。?

?

Js程式碼  

1. Ext.onReady(function(){  
2. var e=new Ext.Element("hello");?  
3. Ext.get("hello"));  
4. Ext.get(document.getElementById("hello"));  
5. Ext.get(e);  
6. });  

//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方法的簡寫形式。

Js程式碼  

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

//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型別，試比較：

Js程式碼  

1. alter(Ext.isArray(Ext.query(‘a.BigClass’))); //true  
2. alter(Ext.query(‘a.BigClass’).length);//裡面包含的元素個數  
3. Ext.select('a.BigClass').each(function(i){  
4. i.dom.href = 'javescript:void(0);'// 找到所有帶有BigClass樣式的A元素修改其連結  
5. });  

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），之後便可恢復該元素