ExtJS初探：瞭解 Ext Core

Liam Wang發表於2013-07-05
JS

Ext Core是一款和jQuery媲美的輕型JS庫，基於MIT許可。對於Dom的操作，我個人還是比較喜歡用jQuery。當然如果專案中用的是ExtJS框架，也就沒必要多引用一個jQuery，Ext Core是ExtJS框架的一個小子集。如果僅僅使用Ext Core的功能，則只需引入builds資料夾下的一個ext-core.js就可以了，無需css等其他檔案。

由於瀏覽器DOM操作的差異，為了實現Web框架的跨瀏覽器特性，每個JS框架都會構建一個新類來操作DOM，在Ext Core中實現該功能的類就是Ext.Element。Ext.Element類中的方法很多，主要方法大致可歸為這麼幾類：DOM查詢和遍歷、DOM操作、大小與定位和CSS樣式操作。對於這些，我們可以在實際開發用到的時候去檢視Ext Core API。為了開發效率，應該對Ext Core的一些常用功能函式做一個大致的瞭解。下面將分別進行簡單介紹。

獲取元素

第一種方式是Ext.get方法，它獲取html節點並會建立Ext.Element例項：

var el = Ext.get("elId");

使用Ext.get會建立元素例項，並可在後期引用時使用。

另一種方式稱為享元模式（Flyweight Design Pattern），是一種省記憶體的模式。如果是對元素的一次性操作，可使用Ext.fly方法。Ext.fly方法不會建立Ext.Element例項，實際它是利用全域性共享的Ext.Element例項進行操作。一般在對元素的某個屬性一次性的取值或設值時使用：

Ext.fly("elId").getHeight();

//下面將div1儲存起來是無效的。
var div1 = Ext.fly('div1');
Ext.fly('div2').frame();
//下面程式碼改變的是div2的高度。
div1.setHeight(200);

另外，有一個容易與上面兩個方法混淆的是Ext.getCmp方法，該方法用來取得Ext元件。如：

var text = new Ext.form.TextField({
    id: "text",
    renderTo: Ext.getBody()
});
Ext.getCmp("text").setWidth(200);

Ext的元件是Ext對一個或多個html元素進行封裝的集合，元件和元素有著本質的區別。

對於Ext容器元件（如Ext.Toolbar、Ext.form.FormPanel等）必須通過Ext.getCmp()獲取。但對於非容器元件，可以根據Ext元件Id通過Ext.get和Ext.fly獲取該元件對應的Ext.Element例項。如：

var text = new Ext.form.TextField({
    id: "text",
    renderTo: Ext.getBody()
});
Ext.fly("text").setWidth(200);

雖然能通過fly或get獲取到Ext元件對於的Ext.Element例項，但顯然這例項不具有Ext元件的功能，比如上面程式碼Ext.fly("text")不能呼叫setValue()方法。關於Ext元件，我會在後續文章中對其進行專門的講解。

上面三種獲取元素的方法，不管是Ext元件程式設計還是DOM程式設計，都會經常用到。

還有一種Ext.getDom，它是用來獲得普通dom元素的，也是將Ext.Element轉換為普通dom元素的一種方式。它的引數可以是元素id，也可以是Ext.Element物件。

var div = Ext.get('div1');
var el = Ext.getDom('div1');
var el = Ext.getDom(div);

操作DOM和CSS

Ext.Element的查詢和遍歷方法不多，下面簡要介紹幾個方法，瞭解一下即可。

is：判斷當前元素是否與選擇器選擇的元素匹配。

if (Ext.get('test').is('div.cls')) {
    alert("test is div.cls");
}

findParent：從當前節點開始查詢與選擇器匹配的父節點（包含當前節點）。要注意該方法預設返回的是HTMLElement物件，不是Ext.Element物件。如果需要返回Ext.Element物件，則需要設置第3個引數為true。

//返回HTMLElement
var el = Ext.fly('elId').findParent('div');  
//定位到在當前節點的第4層父節點  
var el = Ext.fly('elId').findParent('div', 4);
//返回Ext.Element  
var el = Ext.fly('elId').findParent('div', null, true);

up：是findParentNode方法的縮寫，不過該方法返回的是Ext.Element物件。

select：通過選擇器選擇當前節點下的子節點，該方法的返回值是Ext.CompositeElement物件。

Ext.fly('elId').select('div');   
//如果希望返回的節點是Ext.Element物件，需要設定第2個引數為true  
Ext.fly('elId').select('div',true);

注意，Ext.CompositeElement物件是不允許直接通過索引訪問其內部元素的，要訪問內部元素需要使用item方法。注意，是item方法，不是屬性，要使用括號（而不是中括號）包含索引，要遍歷物件中的元素可使用each方法。通過getCount方法可獲取元素的總數。要定位元素可使用indexOf方法。

query：通過選擇器選擇DOM節點，該方法返回包含DOM節點的陣列。

Ext.fly('elId').query('div');  
// 上面這句也可以使用以下語句代替  
Ext.query('div', Ext.getDom('elId'));

child：通過選擇器返回一個當前節點的子節點，預設返回的是Ext.Element物件，如果需要返回HTMLElement物件，第2個引數需要設定為true。

Ext.fly('elId').child('div'); //返回Ext.Element物件  
Ext.fly('elId').child('div',true); //返回HTMLElement物件

down：通過選擇返回一個當前節點的直接子節點，該方法與child方法類似，唯一不同的是，選擇器不能包含節點id，其使用方法可參考child方法。

parent：返回當前節點的父節點。該方法通過設定第 2 個引數可控制返回的是Ext.Element物件還是HTMLElement物件。

Ext.fly('elId').parent(); //返回Ext.Element物件  
Ext.fly('elId').parent('',true); //返回HTMLElement物件  
//也可以通過選擇器選擇  
Ext.fly('elId').parent('div');

另外還有 next、prev、first、last等方法，具體可以檢視Ext Core API文件。

Ext.Element提供操作CSS樣式很方便，來看幾個常用的方法。

addClass：為元素增加樣式類。

//只增加一個樣式類  
Ext.fly('elId').addClass('cls1');  
//增加多個樣式類  
Ext.fly('elId').addClass(['cls1', 'cls2',..., 'clsN']);

toggleClass：樣式類開關。如果element已存在某個樣式類，執行該方法將移除該樣式類；如果不存在，則增加該樣式類。

Ext.fly('elId').toggleClass('elCss');

setStyle：設定樣式屬性。

//只設定一個屬性  
Ext.fly('elId').setStyle('color', '#FFFFFF');  
//設定多個屬性  
Ext.fly('elId').setStyle({  
  color: 'red',  
  background: 'yellow',  
  font-weight: 'bold' 
})

其它方法，有hasClass、replaceClass、getStyle、getColor等，用起來都很簡單，就不一一介紹了。

Ext.DomHelper操作DOM

Ext.DomHelper是一個用來生成HTML片段的類，它主要通過定義一個JSON格式的資料生成HTML片段，對開發人員來說，非常靈活方便。它的資料結構主要包括以下4個屬性：

tag：元素的標籤，例如div、span之類。

children：由元素的子元素組成的陣列，可以通過該屬性不斷增加子元素。

cls：元素的CSS類名。

html：元素的innerHTML屬性，如果不想使用children屬性定義元素的內部HTML內容，可使用該屬性代替。

來看一個示例：

//JSON格式的資料
//也可以將下面的children屬性替換成 html: '<li>1</li><li>2</li><li>3</li>' 
var list = {
    id: 'itemList',
    tag: 'ul',
    cls: 'list',
    children: [
        { tag: 'li', html: '1' },
        { tag: 'li', html: '2' },
        { tag: 'li', html: '3' }
    ]
};
var a = {
    id: 'link1',
    tag: 'a',
    href: 'url',
    target: '_blank',
    html: '連結'
}
//生成程式碼片段，將ul標籤新增到body標籤內
Ext.DomHelper.append(Ext.getBody(), list);
//在ul標籤後插入a標籤
Ext.DomHelper.insertAfter('itemList', a);

上面程式碼會生成下面這樣一段html程式碼片段：

<ul id='itemList' class='list'>  
  <li>1</li>  
  <li>2</li>  
  <li>3</li>  
</ul>
<a target='_blank' href='url' id='link1'>連結</a>

使用Ext.DomHelper的優點是程式碼簡單明瞭、容易維護。Ext.DomHelper操作DOM的方法還有appendChild、appendTo、insertBefore、insertFirst等，這些方法的意義與jQuery中操作Dom的方法是一樣的。

尺寸與大小

 對於某個元素在頁面上的位置和元素尺寸大小的操作，Ext Core也封裝了很多方法，用起來也很方便。這些沒什麼好介紹的，直接看例子吧。

尺寸大小：

//以預設的動畫設定元素高度
Ext.fly('elId').setHeight(200, true);
//以自定義動畫設定元素的高度
Ext.fly('elId').setHeight(200, {
    duration: 0.5, //持續半秒
    //動畫過後做一些操作
    callback: function () { this.update("結束"); }
});

//得到某個元素的高度
var height = Ext.fly('elId').getWidth();

還有一些方法，如getPadding、getBorderWidth等極少用的方法。

定位的設定和取值方法和尺寸設定取值基本一樣：

Ext.fly('elId').setX(200, {
    duration: 0.5, //持續半秒
    //動畫過後做一些操作
    callback: function () { this.update("結束"); }
});

和定位有關的方法還有getX、getY、getXY、getTop、getLeft等等。具體可檢視Ext Core API。

結束語

其實真正用ExtJS框架開發B/S應用的時候，很少會對Dom進行直接操作。ExtJS是基於元件的，本身有著強大的佈局功能。比如要做一個彈出的登入介面，一個Window元件幾個TextField元件再加兩個按鈕元件就做好了，而且畫面風格統一，整齊美觀，基本上不需要用到Div+CSS佈局，也不會在一個Ext容器元件中加個html元素如<input type='button'/>。也就是說，實際應用中，Ext Core中的大部分功能不會和Ext元件混合使用。

但如果選擇了ExtJS框架開發B/S應用，還是有必要了解和學習一下ExtJS框架的Ext Core部分的。

 

參考：

《Ext JS 高階程式設計》
《Ext Core 手冊》
http://docs.sencha.com/core/

相關文章