Ext中的get、getDom、getCmp、getBody、getDoc的區別
Ext中的get、getDom、getCmp、getBody、getDoc的區別(2009-12-24 18:03:13)轉載標簽：extgetgetdomgetcmp 分類：HTML
◆◆Ext中的get、getDom、getCmp、getBody、getDoc的區別
Ext中包含瞭幾個以get開頭的方法，這些方法可以用來得到文檔中DOM、得到當前文檔中的組件、得到Ext元素等，在使用中要註意區別使用。
◇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節點對象等。看下面的示例代碼：
Java代碼
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的p，代碼如下：
<p id="hello">tttt</p>
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的p，代碼如下： <p id="hello">tttt</p>
Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三個方法都可以得到一個與DOM節點hello對應的Ext元素。
◇getCmp方法－獲得Ext組件
getCmp方法用來獲得一個Ext組件，也就是一個已經在頁面中初始化瞭的Component或其子類的對象，getCmp方法其實是Ext.ComponentMgr.get方法的簡寫形式。getCmp方法中隻有一個參數，也就是組件的id。比如下面的代碼：
Java代碼
Ext.onReady(function(){
var h=new Ext.Panel({
id:"h2",
title:" ",
renderTo:"hello",
width:300,
height:200
});
Ext.getCmp("h2").setTitle("新的標題");
});
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方法來設置該面板的標題。
◇getDom方法－獲得DOM節點
getDom方法能夠得到文檔中的DOM節點，該方法中包含一個參數，該參數可以是DOM節點的id、DOM節點對象或DOM節點對應的Ext元素(Element)等。比如下面的代碼：
Java代碼
Ext.onReady(function(){
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
Html：<p id="hello">tttt</p>
Ext.onReady(function(){ var e=new Ext.Element("hello"); Ext.getDom("hello"); Ext.getDom(e); Ext.getDom(e.dom); }); Html：<p id="hello">tttt</p>
在上面的代碼中，Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三個語句返回都是同一個DOM節點對象。
◇getBody方法－得到文檔的body節點元素(Element)
該方法直接得到文檔中與document.body這個DOM節點對應的ExtJS元素（Element），實質就是把document.body對象封裝成ExtJS元素對象返回，該方法不帶任何參數。比如下面的代碼把面板h直接渲染到文檔的body元素中。
Java代碼
Ext.onReady(function(){
var h=new Ext.Panel({
title:"測試",
width:300,
height:200
});
h.render(Ext.getBody());
});
Ext.onReady(function(){ var h=new Ext.Panel({ title:"測試", width:300, height:200 }); h.render(Ext.getBody()); });
◇getDoc方法－獲得與document對應的Ext元素(Element)
getDoc方法實質上就是把當前html文檔對象，也就是把document對象封裝成ExtJS的Element對象返回，該方法不帶任何參數。
◆◆Ext中apply及applyIf方法的應用
apply及applyIf方法都是用於實現把一個對象中的屬性應用於另外一個對象中，相當於屬性拷貝。不同的是apply將會覆蓋目標對象中的屬性，而applyIf隻拷貝目標對象中沒有而源對象中有的屬性。
apply方法的簽名為“apply( Object obj, Object config, Object defaults ) : Object”，該方法包含三個參數，第一個參數是要拷貝的目標對象，第二個參數是拷貝的源對象，第三個參數是可選的，表示給目標對象提供一個默認值。可以簡單的理解成把第三個參數（如果有的話）及第二個參數中的屬性拷貝給第一個參數對象。看下面的代碼：
Javascript代碼
var b1={
p1:"p1 value",
p2:"p2 value",
f1:function(){alert(this.p2)}
};
var b2=new Object();
b2.p2="b2 value";
Ext.apply(b2,b1);
b2.f1();
var b1={ p1:"p1 value", p2:"p2 value", f1:function(){alert(this.p2)} }; var b2=new Object(); b2.p2="b2 value"; Ext.apply(b2,b1); b2.f1();
在上面的代碼中，Ext.apply(b2,b1)這一語句把b1的屬性拷貝到瞭b2對象中，因此調用b2的f1方法可以彈出"p2 value"的提示信息。盡管b2對象已經包含瞭p2屬性值，但拷貝後該屬性值會被覆蓋。可以在調用apply方法時，在第三個參數中指定拷貝屬性的默認值，比如下面的代碼：
Javascript代碼
Ext.apply(b2,b1,{p3:"p3 value"});
alert(b2.p3);
Ext.apply(b2,b1,{p3:"p3 value"}); alert(b2.p3);
這樣會使得b2中包含一個p3的屬性，值為"p3 value"。
applyIf方法的功能跟apply一樣，隻是不會拷貝那些在目標對象及源對象都存在的屬性。比如把前面演示apply方法的代碼改成applyIf，如下：
Javascript代碼
Ext.applyIf(b2,b1);
b2.f1();
Ext.applyIf(b2,b1); b2.f1();
由於b2中已經存在瞭p2屬性，因此，b2.f1()方法中引用this.p2的時候，得到的是"b2 value"，而不是在b1中定義的"p2 value"。
◆◆Ext中鍵盤事件
Java代碼
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
layout:'absolute',
url:'save-form.php',
defaultType: 'textfield',
keys:[{
key: [13],
fn:function() {
alert('您按瞭回車鍵！');
}
}],
items: [{
x: 0,
y: 5,
xtype:'label',
text: 'Send To:'
},{
x: 60,
y: 0,
name: 'to',
anchor:'100%'
}]
});
var form = new Ext.form.FormPanel({ baseCls: 'x-plain', layout:'absolute', url:'save-form.php', defaultType: 'textfield', keys:[{ key: [13], fn:function() { alert('您按瞭回車鍵！'); } }], items: [{ x: 0, y: 5, xtype:'label', text: 'Send To:' },{ x: 60, y: 0, name: 'to', anchor:'100%' }] });
◆◆Ext中觸發按鈕單擊事件
Java代碼
Ext.getCmp('myButtonId').focus();
Ext.getCmp('myButtonId').focus();
◆◆EXTJS同步方式請求
Java代碼
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("GET", listSecretariesUrl, false);
conn.send(null);
//獲取響應的json字符串
var respText = Ext.decode(conn.responseText); //若符合JSON規范，轉化為JSON數組
◆◆EXTJS decode encode方法
Ext.decode 等價於 Ext.util.JSON.decode() 將符合JSON規范的字符串轉化為js數組或對象
Ext.encode 等價於 Ext.util.JSON.encode() 將js數組或對象轉化為符合JSON規范的字符串
