ExtJs の使用法の概要 (非常に詳細)_extjs

1. 要素の取得
1.Ext.get
var el = Ext.get('myElementId');//document.getElementById('myElementId ') と同等の要素の取得;/ /キャッシュされます
2. Ext.fly
var el = Ext.fly('myElementId')//キャッシュする必要はありません。
注: Flyweight デザイン パターンは、メモリを節約するパターンです。このパターンの一般原則は、単一の全体的なオブジェクトを作成し、それを繰り返し使用することです。
3.Ext.getDom
var elDom = Ext.getDom('elId'); // ID に基づいて dom ノードを確認します
var elDom1 = Ext.getDom(elDom); // を確認しますID に基づいて dom ノードを確認します。 dom ノード

2. CSS 要素
4.addClass
Ext.fly('elId').addClass('myCls'); // 要素の myCls のスタイルを追加します
5.radioClass
Ext.fly('elId').radioClass('myCls');// 1 つ以上の className をこの要素に追加し、そのすべての側面 (兄弟) を削除します同じ名前のノード上のスタイル。
6.removeClass
Ext.fly('elId').removeClass('myCls'); // 要素のスタイルを削除します
7.toggleClass
Ext.fly('elId') . toggleClass('myCls'); // スタイルを追加します
Ext.fly('elId').toggleClass('myCls'); // スタイルを削除します
Ext.fly('elId').toggleClass(' myCls'); // スタイルを追加します
8.hasClass
if (Ext.fly('elId').hasClass('myCls')) {//このスタイルが追加されているかどうかを判断します
/ / スタイルが設定されています...
}
10.replaceClass
Ext.fly('elId').replaceClass('myClsA', 'myClsB');// 置換スタイル
11.getStyle
var color = Ext.fly('elId').getStyle('color');//要素の統合された現在のスタイルと計算されたスタイルを返します。
var zIndx = Ext.fly('elId').getStyle('z-index');//要素の統合された現在のスタイルと計算されたスタイルを返します。
12.setStyle
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'
});//要素のスタイルを設定します。オブジェクト パラメータを使用して複数のスタイルを含めることもできます。
13.getColor
Ext.fly('elId').getColor('color');//指定された CSS プロパティの CSS カラーを返します
14.setOpacity

Ext.fly('elId').getColor('color');//指定された CSS プロパティの CSS カラーを返します。 fly ('elId').setOpacity(.45, true);//要素の透明度を設定します。
15.clearOpacity
Ext.fly('elId').clearOpacity();//この要素の透明度設定をクリアします


3. Dom Tour
16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red');
17.is は、現在の要素が受信セレクターと一致するかどうかをテストします。一貫性のある。

コードをコピー コードは次のとおりです。

var el = Ext.get('elId ');
if (el.is('p.myCls')) {
// 条件は true
}

18.findParent
このノードを配置し、このノードを開始点として使用し、外側の親ノードを周囲に検索します。検索条件は、受信する単純なセレクターを満たしている必要があります。
Ext.fly('elId').findParent('div'); // dom ノードを返します
Ext.fly('elId').findParent('div', 4); // 4 つのノードを検索します
Ext.fly('elId').findParent('div', null, true); // Ext.Element を返します
19.findParentNode
このノードの「親ノード」を「このノードの「親ノード」を開始点として使用し、外側の「親」ノードを周囲に向かって検索します。検索条件は、入力された単純セレクターを満たし、一致する必要があります。
Ext.fly('elId').findParentNode('div');
20.up
DOM に沿って外側の「親」ノードを検索します。検索条件は次のとおりです。単純なセレクターが渡されます。
Ext.fly('elId').up('div');
Ext.fly('elId').up('div', 5) // 5 つのレイヤー内のみを検索します
21.select
CSS セレクターのパラメーターを渡し、CSS セレクターを使用して、現在の要素の下から予想される一致する子ノードのセットを形成します (つまり、「select」操作)。最後に Ext を使用します。 .CompositeElement タイプ 結合された要素の形式で返されます。 Ext.select() で呼び出された場合は、ドキュメントが検索可能であることを意味します。
// 結果の CompositeElement を返します
Ext.fly('elId').select('div:nth-child(2)');
// 配列を返します
Ext.fly( ' elId').select('div:nth-child(2)',
true);
// ドキュメント全体が検索されます
Ext.select('div:nth-child( 2)') ;
22.query
クエリを実行し、DOM ノードの配列を返します。オプションの 2 番目のパラメーターは、クエリの開始点、または指定されていない場合はドキュメントに設定されます。
// dom ノードで構成される配列を返します。
Ext.query('div:nth-child(2)');
23.child
深さを制限せずに、入力セレクターに基づきます。単一の子ノードを検索し、一致する場合は選択します。
Ext.fly('elId').child('p.highlight'); // 返される型は Ext.Element です
Ext.fly('elId').child('p.highlight', true); // dom ノードを返します
24.down
このセレクターに基づいて、単一の子ノードを「直接」選択します。
Ext.fly('elId').down('span'); // 返される型は Ext.Element です。
Ext.fly('elId').down('span', true); / dom ノードを返します

25.parent
現在のノードの親ノードを返します。必要に応じて、予期されるセレクターを入力します。
// 親ノードを返します。タイプは Ext.Element
Ext.fly('elId').parent();
// 親ノードを返します。タイプは html dom
Ext.fly( 'elId').parent("", true);
// 親ノードを返しますが、見つかった場合は、その型が返されます。 >Ext.fly('elId').parent("div");
26.next
テキスト ノードをスキップして、次のサイド ノードを取得します。必要に応じて、予期されるセレクターを渡します。
// 次のサイド ノードを返します。タイプは Ext.Element
Ext.fly('elId').next();
// 次のサイド ノードを返します。タイプは html dom
Ext.fly('elId').next("", true);
// 次のサイド ノードを返します。見つかった場合は、それが返されます。 Element
Ext .fly('elId').next("div");
27.prev
前のサイド ノードを取得し、テキスト ノードをスキップします。必要に応じて、予期されるセレクターを渡します。
// 前のサイド ノードを返します。タイプは Ext.Element です。
Ext.fly('elId').prev();
// 前のサイド ノードを返します。タイプは html dom
Ext.fly('elId').prev("", true);
// 前のサイド ノードを返します。見つかった場合は、それが返されます。要素
Ext .fly('elId').prev("div");
28.first
テキスト ノードをスキップして、最初のサイド ノードを取得します。必要に応じて、予期されるセレクターを渡します。
// 最初のサイド ノードを返します。タイプは Ext.Element です。
Ext.fly('elId').first();
// 最初のサイド ノードを返します。タイプは html dom
Ext.fly('elId').first("", true);
// 最初のサイド ノードを返します。見つかった場合は、それが返されます。要素
Ext.fly('elId').first("div");
29.last
テキスト ノードをスキップして、最後のサイド ノードを取得します。必要に応じて、予期されるセレクターを渡します。
// 最後のサイド ノードを返します。タイプは Ext.Element です。
Ext.fly('elId').last();
// 最後のサイド ノードを返します。タイプは html dom
Ext.fly('elId').last("", true);
// 最後のサイド ノードを返します。見つかった場合は、それが返されます。要素
Ext .fly('elId').last("div");


4. DOM の操作 (DHTML の一般的なタスクは、DOM の追加、削除、変更、チェックです) elements) 30.appendChild
入力された要素をこの要素の子要素として分類します。
var el = Ext.get('elId1');
// id で指定
Ext.fly('elId').appendChild('elId2'); Add
Ext.fly('elId').appendChild(el);
// セレクターを組み合わせて追加します
Ext.fly('elId').appendChild(['elId2','elId3' ] );
// dom ノードを直接追加します
Ext.fly('elId').appendChild(el.dom);
// CompositeElement、div のグループを追加します
Ext.fly( ' elId').appendChild(Ext.select('div'));
31.appendTo
この要素を入力要素に追加します。
var el = Ext.get('elId1');
// 'elId' が 'elId2' に追加されます
Ext.fly('elId').appendTo('elId2'); >Ext.fly('elId').appendTo(el); //
Ext.Element に追加 el
32.insertBefore
要素のパラメータを渡し、現在の要素の場所の前に配置します。
var el = Ext.get('elId1');
// dom ノードを前に挿入します
Ext.fly('elId').insertBefore('elId2'); Ext .Element el は前に挿入します。
Ext.fly('elId').insertBefore(el);
33.insertAfter
要素のパラメータを渡し、現在の要素の後に配置します。
var el = Ext.get('elId1');
// dom ノードは
Ext.fly('elId').insertAfter('elId2') の後に挿入されます。 Ext .Element el inserts after
Ext.fly('elId').insertAfter(el);
34.insertFirst
は要素を挿入するか、要素を作成できます (作成するには、「DomHelper 設定項目を使用してください)」 object" がパラメーターとして渡されます)、つまり、この要素は現在の要素の最初の子要素として表示されます。
var el = Ext.get('elId1');
//挿入された dom ノードは最初の要素です
Ext.fly('elId').insertFirst('elId2'); // Ext.Element を最初の要素として挿入します
Ext.fly('elId').insertFirst(el);
// DomHelper 構成アイテムを使用して新しいノードを作成すると、新しいノードが最初のノードになりますone 子要素が挿入されます。
Ext.fly('elId').insertFirst({
tag: 'p',
cls: 'myCls',
html: 'こんにちは、私は新しい最初の子供です'
});
35.replace
は、渡された要素をこの現在の要素に置き換えるのに使用されます。
var el = Ext.get('elId1');
// 'elId' を 'elId2' に置き換えます
Ext.fly('elId').replace('elId2'); // 'elId' で 'elId1' を置き換えます
Ext.fly('elId').replace(el);
36.replaceWith
この要素を渡された要素で置き換えます。パラメーターには、新しい要素、または作成される DomHelper 構成項目オブジェクトを指定できます。
var el = Ext.get('elId1');
Ext.fly('elId').replaceWith('elId2'); // 'elId2' は 'elId' を置き換えます。 ('elId').replaceWith(el); //
'elId1' は 'elId' を置き換えます
// DomHelper 設定項目を使用して新しいノードを作成し、'elId' をこのノードに置き換えます。
Ext.fly('elId').replaceWith({
tag: 'p',
cls: 'myCls',
html: 'こんにちは、elId を置き換えました'
}) ;



5. DomHelper 構成項目

37.createChild
DomHelper 構成項目オブジェクトのパラメーターを渡し、作成して要素に追加します。
var el = Ext.get('elId');
var dhConfig = { tag: 'p', cls: 'myCls',
html: 'こんにちは、置き換えましたelId'
};
// 新しいノードを作成して 'elId' 内に配置します
el.createChild(dhConfig);
// 新しいノードを作成して最初の子要素として配置しますof el Before
el.createChild(dhConfig, el.first());
38.wrap
現在の要素の外側にラップされた新しい要素を作成します。
Ext.fly('elId').wrap(); // div は elId をラップします
// 新しい要素を使用して elId をラップします
Ext.fly('elId').wrap( {
tag: 'p',
cls: 'myCls',
html: 'こんにちは、elId を置き換えました'
});


6.
38.insertHtml
この要素に HTML フラグメントを挿入します。要素内のどこに挿入するHTMLを配置するかは、beforeBegin、beforeEnd、afterBegin、afterEndを指定できます。 2 番目のパラメータは HTML フラグメントを挿入し、3 番目のパラメータは Ext.Element タイプの DOM オブジェクトを返すかどうかを決定します。
Ext.fly('elId').insertHtml(
'beforeBegin',
'

Click me

',
true
); // Return Ext.Element
39.remove
DOM から現在の要素を削除し、キャッシュから削除します。 .
Ext.fly('elId').remove(); //
elId はキャッシュにも dom にもありません。
40.removeNode
ドキュメントの DOM ノードを削除します。 body ノードの場合は無視されます。
Ext.removeNode(node); // dom から (HTMLElement) を削除します



7. Ajax

41.load
Updater Ext への直接アクセス.Updater.update() メソッド (同じパラメータ)。パラメーターは Ext.Updater.update() メソッドと一致しています。
Ext.fly('elId').load({url: 'serverSide.php'})
42.getUpdater
この要素の UpdateManager を取得します。 var updr = Ext.fly('elId').getUpdater();
updr.update({ url: 'http://myserver.com/index.php',
params : {
param1: "foo",
param2: "bar"
}
});


8. イベント処理

43. addListener/on
この要素にイベント処理関数を追加します。 on() はその略称です。省略方法でも同様の効果があり、コードを記述する際の労力を節約できます。
var el = Ext.get('elId');
el.on('click', function(e,t) {
// e は標準化されたイベント オブジェクト (Ext.EventObject) // t はクリック ターゲット要素であり、Ext.Element です。
// オブジェクト ポインタも t });
44.removeListener/un
から要素 イベントハンドラーを削除します。 un() はその短縮形です。
var el = Ext.get('elId');
el.un('click', this.handlerFn);
// または
el.removeListener('click', this. handlerFn);
45.Ext.EventObject
EventObject は、さまざまなブラウザを統合し、W3C 標準メソッドに準拠しようとするイベント モデルを提供します。
// eこれは標準のイベント オブジェクトではなく、Ext.EventObject です。
function handleClick(e){
e.preventDefault();
var target = e.getTarget();
...
}
var myDiv = Ext.get( 'myDiv');
myDiv.on("click", handleClick);
// または
Ext.EventManager.on('myDiv', 'click', handleClick); EventManager.addListener('myDiv', 'click', handleClick);


9. 高度なイベント関数 代わりにイベントの委任を使用するには、イベントを登録します。コンテナーのハンドラーを選択し、添付されたロジックに従って選択します:
Ext.fly('actions').on('click, function(e,t) {
switch(t.id) {
case ''btn-edit':
// 特定の要素のイベントを処理する特定のプロセス
break;
case 'btn-delete':
// 特定の要素のイベントを処理する特定のプロセスelements
break;
case 'btn-cancel':
// 特定の要素のイベントを処理する特定のプロセス
}
}); >47. デリゲート デリゲート
イベントハンドラーを登録するときにこのオプションを追加できます。ターゲット要素をフィルタリングするか、1 レベル下のターゲットの子孫を検索するために使用される単純なセレクター。
el.on('click', function(e,t) {
//イベント固有のプロセスを実行します
}, this, {
// 子孫 'clickable'
デリゲートに有効: '.clickable'
});
48. フリップ ホバー
これは Ext のフリップ メニューの例です:
// マウスが要素に入ったときの処理
function enter(e , t){
t.toggleClass('red');
}
// マウスが要素から離れるときの処理
function Leave(e,t){
t.toggleClass( ' red');
}
// ホバーをサブスクライブします
el.hover(over, out);
49. イベント ハンドラーを削除します。
el.removeAllListeners();
50. 一度に単一のトリガーを実行するかどうか
イベント ハンドラーを登録するときにこのオプションを追加して設定できます。 True は、イベントがトリガーされた後に次回それ自体を削除するハンドラー関数を追加することを意味します。
el.on('click', function(e,t) {
//イベントを実行する具体的なプロセス
}, this, {
single: true // にはなりません一度トリガーされた後に再度実行される Event
}); 51. Buffer
イベント ハンドラーを登録するときにこのオプションを追加できます。ミリ秒数を指定すると、処理関数は Ext.util.DelayedTask の遅延後に実行されるようにスケジュールされます。そのイベントでイベントが再度発生すると、元のハンドラーは有効になりませんが、代わりに新しいハンドラーがスケジュールされます。
el.on('click', function(e,t) {
//イベントの特定の処理を実行する
}, this, {
buffer: 1000 // でイベントを繰り返す1 秒 時間間隔
});
52. 遅延
イベント ハンドラーを登録するときにこのオプションを追加できます。ポストトリガーイベント処理関数の遅延実行時間を指定します。
el.on('click', function(e,t) {
//イベント固有の処理を実行
}, this, {
// イベントを遅延させ、イベントに応答してからタイミングを開始(ここでは 1 秒)
遅延: 1000
});
53. ターゲット target
イベント ハンドラーを登録するときにこのオプションを追加できます。別の対象要素を指定したい場合は、この設定項目に設定できます。これにより、この処理関数は、イベント報告フェーズ中にこの要素が見つかった場合にのみ実行されることが保証されます。




コードをコピー


コードは次のとおりです。

el.on('click', function (e, t) { //イベントを実行する特定のプロセス}, this, { //イベントは、内部の最初の 'div' が検出された場合にのみトリガーされますtarget : el.up('div ')

});

10. サイズとサイズ
54.getHeight
要素のオフセット高さを返します。
var ht = Ext.fly('elId').getHeight();
55.getWidth
要素のオフセット幅を返します。
var wd = Ext.fly('elId').getWidth();
56.setHeight
要素の高さを設定します。
Ext.fly('elId').setHeight();
57.setWidth
要素の幅を設定します。
Ext.fly('elId').setWidth();
58.getBorderWidth
指定されたサイド (サイド) のパディング幅を返します。
var bdr_wd = Ext.fly('elId').getBorderWidth('lr');
59.getPadding
には、t、l、r、b、または任意の組み合わせを指定できます。たとえば、lr パラメータを渡すと、(l) 左側のパディング (r) 右側のパディングになります。
var padding = Ext.fly('elId').getPadding('lr');
60.clip
現在のオーバーフロー (オーバーフロー) を保存し、要素のオーバーフロー部分をクリップします。削除するには unclip( ) を使用します。
Ext.fly('elId').clip();
61.unclip
clip() を呼び出す前に、元のクリップされた部分 (オーバーフロー) を返します。
Ext.fly('elId').unclip();
62.isBorderBox
要素がボーダー ボックスを使用しているかどうかを判断するために、さまざまな CSS ルール/ブラウザをテストします。
if (Ext.isBorderBox) {
//
}

11. 位置決め

63.getX
相対要素を返しますページ座標の X 位置。正しいページ座標を持つためには、要素が DOM ツリーの一部である必要があります (display:none または結合されていない要素は false を返します)。
var elX = Ext.fly('elId').getX()
64.getY
ページ座標を基準とした要素の Y 位置を返します。正しいページ座標を持つためには、要素が DOM ツリーの一部である必要があります (display:none または結合されていない要素は false を返します)。
var elY = Ext.fly('elId').getY()
65.getXY
要素の現在のページ座標の位置を返します。正しいページ座標を持つためには、要素が DOM ツリーの一部である必要があります (display:none または結合されていない要素は false を返します)。
var elXY = Ext.fly('elId').getXY() // elXY は配列です
66.setX
ページ座標を基準とした要素の X 位置を返します。正しいページ座標を持つためには、要素が DOM ツリーの一部である必要があります (display:none または結合されていない要素は false を返します)。
Ext.fly('elId').setX(10)
67.setY
ページ座標を基準とした要素の Y 位置を返します。正しいページ座標を持つためには、要素が DOM ツリーの一部である必要があります (display:none または結合されていない要素は false を返します)。
Ext.fly('elId').setY(10)
68.setXY
要素の現在のページ座標の位置を返します。正しいページ座標を持つためには、要素が DOM ツリーの一部である必要があります (display:none または結合されていない要素は false を返します)。
Ext.fly('elId').setXY([20,10])
69.getOffsetsTo
現在の要素と入力要素の間の距離を返します。正しいページ座標を持つには、両方の要素が DOM ツリーの一部である必要があります (display:none または追加されていない要素は false を返します)。
var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl);
70.getLeft
左側の X 座標を取得します。
var elLeft = Ext.fly('elId').getLeft();
71.getRight
要素の右側の X 座標 (要素 X 位置 要素幅) を取得します。
var elRight = Ext.fly('elId').getRight();
72.getTop
上部の Y 座標を取得します。
var elTop = Ext.fly('elId').getTop();
73.getBottom
要素の下端の Y 座標 (要素の Y 位置 要素の幅) を取得します。
var elBottom = Ext.fly('elId').getBottom();
74.setLeft
要素の左位置を設定するには、(setX() の代わりに) CSS スタイルを直接使用します。
Ext.fly('elId').setLeft(25)
75.setRight
要素 CSS のスタイルを右に設定します。
Ext.fly('elId').setRight(15)
76.setTop
(setY() の代わりに) CSS スタイルを直接使用して、要素の上部の位置を設定します。
Ext.fly('elId').setTop(12)
77.setBottom
要素の CSS Bottom のスタイルを設定します。
Ext.fly('elId').setBottom(15)
78.setLocation
この要素がどのように配置されているかに関係なく、ページ上の座標位置を設定します。ページ座標を持つには、要素が DOM ツリーの一部である必要があります (display:none または追加されていない要素は無効とみなされ、false が返されます)。
Ext.fly('elId').setLocation(15,32)
79.moveTo
この要素がどのように配置されているかに関係なく、ページ上の座標位置を設定します。ページ座標を持つには、要素が DOM ツリーの一部である必要があります (display:none または追加されていない要素は無効とみなされ、false が返されます)。
Ext.fly('elId').moveTo(12,17)
80.position
要素の位置を初期化します。期待された位置が渡されず、まだ配置されていない場合、現在の要素は相対配置に設定されます。
Ext.fly('elId').position("relative")
81.clearPositioning
ドキュメントのロード後に位置をクリアし、デフォルトにリセットします。
Ext.fly('elId').clearPositioning()
Ext.fly('elId').clearPositioning("top")
82.getPositioning
CSS 位置情報を含むオブジェクトを返します。役立つヒント: setPostioning と併用すると、更新が実行される前にスナップショットを取得し、要素を復元できます。
var pos = Ext.fly('elId').getPositioning()
83.setPositioning
getPositioning() によって返されたオブジェクトは位置決めに使用されます。
Ext.fly('elId').setPositioning({
left: 'static',
right: 'auto'
})
84.translatePoints
ページに送信要素の CSS 左/上の値に変換される、座標の引数。
// {left:translX, top: translY}
var Points = Ext.fly('elId').translatePoints(15,18);