Ext中的get、getDom、getCmp、getBody、getDoc的區別 (轉)

langgufu314發表於2012-02-02

Ext 中包含了幾個以 get 開頭的方法,這些方法可以用來得到文件中 DOM 、得到當前文件中的元件、得到 Ext 元素等,在使用中要注意區別使用。
1
get 方法
get
方法用來得到一個 Ext 元素,也就是型別為 Ext.Element 的物件, Ext.Element 類是 Ext DOM 的封裝,代表 DOM 的元素,可以為每一個 DOM 建立一個對應的 Element 物件,可以通過 Element 物件上的方法來實現對 DOM 指定的操作,比如用 hide 方法可以隱藏元素、 initDD 方法可以讓指定的 DOM 具有拖放特性等。 get 方法其實是 Ext.Element.get 的簡寫形式。
get
方法中只有一個引數,這個引數是混合引數,可以是 DOM 節點的 id 、也可以是一個 Element 、或者是一個 DOM 節點物件等。看下面的示例程式碼:

Ext.onReady(function(){
var e=new Ext.Element("hello");
alert(Ext.get("hello"));
alert(Ext.get(document.getElementById("hello")));
alert(Ext.get(e));
});
Html
頁面中包含一個 id hello div ,程式碼如下:
<div id="hello">tttt</div>

Ext.get("hello")
Ext.get(document.getElementById("hello")) Ext.get(e) 等三個方法都可以得到一個與 DOM 節點 hello 對應的 Ext 元素。
2
getCmp 方法-獲得 Ext 元件。
getCmp
方法用來獲得一個 Ext 元件,也就是一個已經在頁面中初始化了的 Component 或其子類的物件, getCmp 方法其實是 Ext.ComponentMgr.get 方法的簡寫形式。 getCmp 方法中只有一個引數,也就是元件的 id 。比如下面的程式碼:

Ext.onReady(function(){
var h=new Ext.Panel({
id:"h2",
title:"
  ",
renderTo:"hello",
width:300,
height:200});
Ext.getCmp("h2").setTitle("
新的標題 ");
});

在程式碼中,我們使用 Ext.getCmp("h2"). 來得到 id h2 的元件,並呼叫其 setTitle 方法來設定該皮膚的標題。
3
getDom 方法-獲得 DOM 節點
getDom
方法能夠得到文件中的 DOM 節點,該方法中包含一個引數,該引數可以是 DOM 節點的 id DOM 節點物件或 DOM 節點對應的 Ext 元素 (Element) 等。比如下面的程式碼:

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

<div id="hello">tttt</div>

在上面的程式碼中, Ext.getDom("hello") Ext.getDom(e) Ext.getDom(e.dom) 等三個語句返回都是同一個 DOM 節點物件。
4
getBody 方法-得到文件的 body 節點元素 (Element)
該方法直接得到文件中與 document.body 這個 DOM 節點對應的 ExtJS 元素( Element ),實質就是把 document.body 物件封裝成 ExtJS 元素物件返回,該方法不帶任何引數。比如下面的程式碼把皮膚 h 直接渲染到文件的 body 元素中。

Ext.onReady(function(){
var h=new Ext.Panel({title:"
測試 ",width:300,height:200});
h.render(Ext.getBody());
});

5
getDoc 方法-獲得與 document 對應的 Ext 元素 (Element)
getDoc
方法實質上就是把當前 html 文件物件,也就是把 document 物件封裝成 ExtJS Element 物件返回,該方法不帶任何引數。

相關文章