ExtJs 이벤트 메커니즘 기본 코드 모델 및 프로세스 분석_extjs

.org/1999/xhtml">
< ;head>

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






이름:

성별:
;input type="button" value="Input" onclick="button_click()"/>

//클래스에 이벤트 메서드 추가
this.addEvents(
"namechange",
"sexchange "
) ;
} ;

//Person 클래스는 Observable
Ext.extend(Ext.dojochina.Person, Ext.util.Observable, {
name: "",
sex:"",
//속성
setName:function(_name){

if(this.name != _name){
// 설정 객체의 새 이름
this.name = _name ;
//namechange라는 이벤트를 시작하고 그 뒤에 세 개의 매개변수가 전달됩니다.
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. 객체 선언 시 바인딩할 이벤트 이름을 다음 방법으로 선언해야 합니다. >

2. Ext.util.Observable에서 사용자 정의 클래스를 상속하고 1에서 정의한 이벤트 이름을 트리거하려는 속성을 구현합니다. 즉, 메소드)

setName:function(_name){
if(this.name != _name){
//객체의 새 이름 설정
this.name =
// namechange라는 이벤트를 실행하고 그 뒤에 세 개의 전달된 매개변수
this.fireEvent("namechange" , this , this.name , _name)
}
},

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