extjs学習メモ(2) Ext.Element class_extjs

違いは、fly は軽量の Element を返し、占有するメモリは少なくなりますが、オブジェクトへの参照は保存されません。一方、get は返される Element オブジェクトを毎回キャッシュしますが、より多くのメモリを占有します。メモリ。例を使用して 2 つの違いを説明し、同時に Element が提供する強力な機能を見ていきます。次の内容の HTML ページをプロジェクトに追加します:

コードをコピーします コードは次のとおりです:

link rel=" stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

html>


もちろん、element.js ファイルを追加する必要もあります。最初に Ext.get メソッドを使用して要素オブジェクトを取得し、いくつかの操作を実行します。 🎜>

コードをコピーします コードは次のとおりです: ///

/**//*

*作成者: Daben
*日付: 2009-10-12
*バージョン: 1.0
*/

Ext.onReady(function() {
Ext.get("btn").on( "クリック", function() {
var el1 = Ext.get( "div1");
var el2 = Ext.get("div2"); //CSS クラスを追加
el2.addClass("green"); //幅を設定
el1.highlight(); ; //Center
el1.setOpacity(0.5); //透明度を設定します
el2.fadeIn({ endOpacity: 1, //0 から 1 までの任意の値を指定できます
easing: 'easeOut',
期間: 1
});
//el1.addClass("red").setWidth(100).setOpacity(0.5).center();
}); ;


実行後、 をクリックします ボタン ボタンで効果が確認できます。コードは非常に直感的であり、多くの説明は必要ありません。次に、Element の get メソッドを fly に変更します。これを実行すると、div1 の Element 参照が保存されていないため、すべての操作が div2 に対して実行されることがわかります。取得された Element オブジェクトが書き換えられるため、操作が div2 に対して実行されることがわかります。 jquery を使用したことのある人の多くは、メソッド チェーンでコードを記述することを好みます。Element オブジェクトのほとんどのメソッドは依然として Element オブジェクトを返すため、23 行目で書いたように、ここでもメソッド チェーンを使用できます。ただし、highlight、fadeIn、fadeOut メソッドは実際には Element オブジェクトのメソッドではなく、js の apply メソッドを使用して Element オブジェクトに追加されるだけであることに注意してください。 apply メソッドは (ここを参照)、Fx Tears のメソッドは内部エフェクト キューを使用し、エフェクトは特定の順序で実行されますが、Element オブジェクトのメソッドは即時に実行されます。したがって、メソッド チェーン内で Element メソッドと Fx メソッドを同時に使用する場合は、望ましくない結果が発生する可能性があるので注意する必要があります。
コードでは setWith メソッドが使用されています。Element クラスには set で始まるメソッドもいくつかあります。これらのメソッドのほとんどには、アニメーション効果を表示するためのオプションのパラメータがあります。これは、デフォルト設定を有効にするために使用できるブール値であるか、アニメーションを詳細にカスタマイズするために使用される json オブジェクトです。アニメーションの効果を確認するために、



コードをコピー

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

/// /**//* *作成者: Daben *日付: 2009-10-12 *バージョン: 1.0 */

Ext.onReady(function() {

Ext.get("btn").on("click", function() {
Ext .fly("div1").addClass("red").setWidth(100, {
duration: 3,
easing: 'elasticIn',
callback: function() {Ext.Msg. alert ("情報", "div1 の幅は 100 に設定されています") },
スコープ: this
});


上記のコードを簡単に説明します。デュレーションはアニメーション時間を指定します。ここでは 3 秒です。イージングは​​、有効な Ext.lib.Easing 値である必要があります。ヘルプ ドキュメント。有効な値。callback、アニメーションの完了時に呼び出される関数、scope はコールバック関数のスコープを指定します。
Element には、get メソッドと fly メソッドの使用に加えて、非常に強力なメソッドである select メソッドもあります (実際には、CompositeElementLite または CompositeElement オブジェクトを返します)。これは js の継承関係であり、返されたオブジェクトに対して Element メソッドを使用すると、実際には配列内の各 Element オブジェクトに対してメソッドが呼び出されます。このメソッドは Ext.select と省略できます。使用方法は jquery と似ています。たとえば、Ext.select("p") はすべての p タグを選択します。 red") が選択されます。 CSS クラスが red のすべてのタグについて、セレクターは "div.foo:nth-child(odd)[@foo=bar].bar:first" のように組み合わせて使用​​できます。セレクターを上手に使用すると、要素を制御する際に非常に便利になります。セレクターについて詳しくは、Ext.DomQuery クラスのドキュメントを参照してください。
Element のクエリ メソッドは、select と同様のメソッドを使用して Dom ノードのコレクションを返します。ただし、Ext.query は Ext.Element.query の略称ではなく、Ext.DomQuery の略称であることに注意してください。方法を選択します。 Dom コンタクトは get メソッドを通じて Element オブジェクトを取得でき、Element オブジェクトは dom 属性を通じて Dom ノードを取得でき、さまざまなニーズに応じて簡単に変換できます。
最後に、Element の addListener メソッドについて説明します。このメソッドは on と省略できます。これは、Element オブジェクトのイベントを登録するために使用されます。on("click", function(){ の使用法はすでに説明しました。 })。このメソッドを使用して、一度に複数のイベントを登録することもできます。例:

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

el.on({
'click' : {
fn: this.onClick,
スコープ: this,
遅延: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
} );

遅延は、イベントがトリガーされてからイベント処理関数が実行されるまでの時間を示します。単位はミリ秒です。簡潔に書く方法もあります:

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

el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});