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，代碼如下：
tttt
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，代碼如下： tttt

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：tttt
Ext.onReady(function(){ var e=new Ext.Element("hello"); Ext.getDom("hello"); Ext.getDom(e); Ext.getDom(e.dom); }); Html：tttt

在上面的代碼中，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規范的字符串

發佈留言 取消回覆

發佈留言取消回覆