ExtJsイベントメカニズムの基本コードモデルとプロセス分析

ExtJsイベントメカニズムの基本コードモデルとプロセス分析_extjs

WBOY

リリース： 2016-05-16 18:18:01

オリジナル

975 人が閲覧しました

コード実装の目的: カスタムクラスの特定の属性を使用するときにイベントをトリガーします。
このプログラムの効果: 入力ボタンをクリックすると、ユーザーが名前を入力するためのスクリプトプロンプト入力ボックスが表示され、確認後、ユーザーが入力した名前がスクリプトの名前テキストボックスに表示されます。ページのタイトルが名前と一致し、ユーザーが性別を入力するためのスクリプトプロンプト入力ボックスが表示されます。入力が完了して [OK] をクリックすると、ユーザーが入力した性別が表示されます。ページ上の性別テキストボックスに表示されます。

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

.org/1999/xhtml"> ;head>
link rel="stylesheet" type="text/css" href="ext-all.css" />
イベント

var _person = null; //ボタンのクリック後にトリガーされます
button_click = function(){
_person.setName(prompt("名前を入力してください:", ""))
_person.setSex(prompt("性別を入力してください); :" , "")) ;
}

//ページロード後の処理
Ext.onReady(function(){
//コントロールオブジェクトを取得
var txt_name = Ext.get("txt_name");
var txt_sex = Ext.get("txt_sex");
//新しい Person オブジェクトを作成します
_person = new Ext.dojochina.Person();
//オブジェクトのイベント処理メソッドを実装します
//JSでトリガーするには、イベントトリガー後の処理です
_person.on("namechange", function(_person , _old , _new ){
txt_name.dom.value = _new ;
alert(_person.getName())
}) ;
_person.on("sexchange" , _old , _new) {
txt_sex.dom.value = _new ;
}) ;
_person.on("namechange" , function(_person , _old , _new){
document.title = _new ;
}) ;
}) ;

名前:

性別:

コードをコピーします

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

Ext.namespace("Ext.dojochina"); 🎜>//クラスを定義しますExt.dojochina.person = function(){ //クラスにイベントメソッドを追加しますthis.addEvents( "namechange", "sexchange " ) ;

} ;

// Person クラスは Observable を継承します 
Ext.extend(Ext.dojochina.person, Ext.util.Observable, { 
 name: "", 
sex:"", 
//Attributes
setName:function(_name){ 

if(this.name != _name){ 
// を設定しますオブジェクトの新しい名前 
this.name = _name ; 
// namechange という名前のイベントを開始し、続いて 3 つのパラメーターを渡します 
this.fireEvent("namechange" , this , this. name , _name) ; 


} 
}, 
setSex:function(_sex){ 

if(this.sex != _sex){ 
this .sex = _sex ; 
//上記と同じ
this.fireEvent("sexchange" , this , this.sex , _sex) 

}, 
getName:function( ){ 
return this.name; 
} 
}) ; 

 
クラスがイベントをバインドしたい場合、次のことが結論付けられます。一般的なプログラミング プロセスは次のとおりです。 


1. オブジェクトを宣言するときは、次のメソッドを使用してバインドするイベント名を宣言する必要があります。 >


コードをコピー


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

this.addEvents(
"namechange",
"sexchange "

2. Ext.util.Observable からカスタムクラスを継承し、1 で定義したイベント名をトリガーする属性を実装します (またはつまり、メソッドです);

コードをコピーします

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

 
setName:function(_name){ 
if(this.name != _name){ 
// オブジェクトの新しい名前を設定します 
this.name = _name; // namechange という名前のイベントを起動し、その後に渡された 3 つのパラメータ 
this.fireEvent("namechange" , this , this.name , _name) 
} 
}, 

 

ここで注意してください: this.fireEvent("namechange", this, this.name, _name); は、イベントをトリガーするための最も直感的な入り口です。ここでメソッドが実行されると、namechange という名前のイベントが発生します。

3 イベントがトリガーされた後の処理ロジックを実装します。

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

_person.on ("namechange " , function(_person , _old , _new){ 
txt_name.dom.value = _new ; 
alert(_person.getName()); 
}) ; 

 

これは Extjs の組み込みメソッドです。namechange という名前のイベントがトリガーされると、関数関数が実行されます。この関数のパラメーターは this.fireEvent("namechange", this, this.name) によって決まります。 , JS では _name) ; 次の 3 つのパラメータが渡されます。
さて、EXTJS の最も単純で古典的なイベントトリガーメカニズムのプログラムコード設計プロセスは次のとおりで、コード実行プロセスはその逆のプロセスです。大多数の EXTJS 愛好家とのコミュニケーションへようこそ、私の QQ: 1213145055。

この記事の著者: 王崇安、ブログアドレス: http://www.cnblogs.com/wangchongan