更多好的文章就在 blog.haoitsoft.com,請大家多多支持!
還可以通過好電影網:www.haotv8.cc,看你喜歡的電影,勞逸結合,效率更高哦!
Ext中的get、getDom、getCmp、getBody、getDoc的區別
◆◆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的div,代碼如下:
<div id="hello">tttt</div>
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元素。
◇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:<div id="hello">tttt</div>
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節點對象。
◇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規範的字符串