Extjsメモ

◆◆
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メソッドには1つのパラメータしかありません.このパラメータはハイブリッドパラメータで、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)の3つの方法でDOMノードhelloに対応するExt要素を得ることができます.
◇
getCmpメソッド-Extコンポーネントの取得
getCmpメソッドはExtコンポーネント、すなわちページで初期化されたComponentまたはそのサブクラスのオブジェクトを得るために使用され、getCmpメソッドはExt.ComponentMgrである.getメソッドの簡略化形式.getCmpメソッドにはパラメータが1つしかありません.つまり、コンポーネントのidです.たとえば、次のコードがあります.

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

コードではExt.getCmp(「h 2」)を用いる.を使用してidがh 2のコンポーネントを取得し、そのsettitleメソッドを呼び出してパネルのタイトルを設定します.
◇
getDomメソッド-DOMノードの取得
getDomメソッドは、DOMノードのid、DOMノードオブジェクト、またはDOMノードに対応するExt要素などのパラメータを含むドキュメント内のDOMノードを得ることができる.たとえば、次のコードがあります.

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)の3つの文が同じDOMノードオブジェクトを返します.
◇
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());
});

◇
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」です.このメソッドには3つのパラメータが含まれています.最初のパラメータはコピーするターゲットオブジェクトで、2番目のパラメータはコピーのソースオブジェクトで、3番目のパラメータはオプションで、ターゲットオブジェクトにデフォルト値を提供することを示します.3番目のパラメータ(もしあれば)および2番目のパラメータの属性を1番目のパラメータオブジェクトにコピーすることは簡単に理解できる.次のコードを見てください.

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(b 2,b 1)という文がb 1の属性をb 2オブジェクトにコピーするので、b 2を呼び出すf 1メソッドは「p 2 value」のプロンプト情報をポップアップすることができる.b 2オブジェクトにはp 2属性値が含まれていますが、コピーするとその属性値は上書きされます.applyメソッドを呼び出すときに、次のコードなど、3番目のパラメータでコピー属性のデフォルト値を指定できます.

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

これにより、b 2にはp 3の属性が含まれ、値は「p 3 value」となる.
applyIfメソッドの機能はapplyと同様ですが、ターゲットオブジェクトおよびソースオブジェクトに存在する属性はコピーされません.例えば、applyメソッドを前に示したコードをapplyIfに変更すると、以下のようになります.

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

b 2には既にp 2属性が存在するため、b 2.f 1()メソッドではthisを参照する.p 2の場合、b 1で定義した「p 2 value」ではなく「b 2 value」が得られる.
◆◆
Ext中キーボードイベント

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でトリガーボタンクリックイベント

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

◆◆
EXTJS同期方式要求

var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("GET", listSecretariesUrl, false);
conn.send(null);
//     json   
var responseArray = conn.responseText;