Extjs備忘錄

◆◆[b][color=red]Ext中的get、getDom、getCmp、getBody、getDoc的區別[/color][/b]
Ext中包含了幾個以get開頭的方法，這些方法可以用來得到文檔中DOM、得到當前文檔中的組件、得到Ext元素等，在使用中要注意區別使用。
◇[b]get方法[/b]
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元素。
◇[b]getCmp方法－獲得Ext組件[/b]
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方法來設置該面板的標題。
◇[b]getDom方法－獲得DOM節點[/b]
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節點對象。
◇[b]getBody方法－得到文檔的body節點元素(Element)[/b]
該方法直接得到文檔中與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());
});

◇[b]getDoc方法－獲得與document對應的Ext元素(Element)[/b]
getDoc方法實質上就是把當前html文檔對象，也就是把document對象封裝成ExtJS的Element對象返回，該方法不帶任何參數。


◆◆[b][color=red]Ext中apply及applyIf方法的應用[/color][/b]
apply及applyIf方法都是用於實現把一個對象中的屬性應用於另外一個對象中，相當於屬性拷貝。不同的是apply將會覆蓋目標對象中的屬性，而applyIf只拷貝目標對象中沒有而源對象中有的屬性。
apply方法的簽名爲“apply( Object obj, Object config, Object defaults ) : Object”，該方法包含三個參數，第一個參數是要拷貝的目標對象，第二個參數是拷貝的源對象，第三個參數是可選的，表示給目標對象提供一個默認值。可以簡單的理解成把第三個參數（如果有的話）及第二個參數中的屬性拷貝給第一個參數對象。看下面的代碼：

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方法時，在第三個參數中指定拷貝屬性的默認值，比如下面的代碼：

Ext.apply(b2,b1,{p3:"p3 value"});
alert(b2.p3);

這樣會使得b2中包含一個p3的屬性，值爲"p3 value"。
applyIf方法的功能跟apply一樣，只是不會拷貝那些在目標對象及源對象都存在的屬性。比如把前面演示apply方法的代碼改成applyIf，如下：

Ext.applyIf(b2,b1);
b2.f1();

由於b2中已經存在了p2屬性，因此，b2.f1()方法中引用this.p2的時候，得到的是"b2 value"，而不是在b1中定義的"p2 value"。


◆◆[b][color=red]Ext中鍵盤事件[/color][/b]

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%'
	}]
});

◆◆[b][color=red]Ext中觸發按鈕單擊事件[/color][/b]

Ext.getCmp('myButtonId').focus();

◆◆[b][color=red]EXTJS同步方式請求[/color][/b]

var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("GET", listSecretariesUrl, false);
conn.send(null);
//獲取響應的json字符串
var responseArray = conn.responseText;