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

코드 구현의 목적: 사용자 정의 클래스의 특정 속성을 사용할 때 이벤트를 트리거합니다. 이 프로그램의 효과: 입력 버튼을 클릭하면 사용자가 이름을 입력할 수 있는 스크립트 프롬프트 입력 상자가 나타납니다. 확인 후 사용자가 입력한 이름이 이름 텍스트 상자에 표시됩니다. 페이지 제목이 이름과 일치하게 되며 사용자가 성별을 입력할 수 있는 스크립트 프롬프트 입력 상자가 나타납니다. 입력이 완료되고 확인을 클릭하면 사용자가 입력한 성별이 표시됩니다. 페이지의 성별 텍스트 상자에 표시됩니다.

코드 복사 코드는 다음과 같습니다. .org/1999/xhtml"> 이벤트 var _person //버튼 클릭 후 실행 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" , 함수 (_person , _old , _new) { txt_sex.dom.value = _new ; }) ; _person.on("namechange" , function(_person , _old , _new){ document.title = _new ; }) ; })

이름:

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

코드 복사 코드는 다음과 같습니다. Ext.namespace("Ext.dojochina") //클래스 정의 Ext.dojochina.Person = function(){ //클래스에 이벤트 메서드 추가 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. 객체 선언 시 바인딩할 이벤트 이름을 다음 방법으로 선언해야 합니다. >

코드 복사 코드는 다음과 같습니다. this.addEvents( "namechange", "sexchange" 2. Ext.util.Observable에서 사용자 정의 클래스를 상속하고 1에서 정의한 이벤트 이름을 트리거하려는 속성을 구현합니다. 즉, 메소드)

코드 복사 코드는 다음과 같습니다. setName:function(_name){ if(this.name != _name){ //객체의 새 이름 설정 this.name = // namechange라는 이벤트를 실행하고 그 뒤에 세 개의 전달된 매개변수 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라는 이벤트가 발생하면 함수 function이 실행됩니다. this.fireEvent("namechange", this, this.name) , JS에서는 _name) ; 다음 세 개의 매개변수가 전달됩니다. 그렇습니다. EXTJS의 가장 간단하고 고전적인 이벤트 트리거 메커니즘 프로그램 코드 설계 프로세스는 이와 같으며 코드 실행 프로세스는 역 프로세스입니다. 내 QQ: 1213145055인 대다수의 EXTJS 애호가들과 소통하는 것을 환영합니다.

이 글의 저자: Wang Chongan, 블로그 주소: http://www.cnblogs.com/wangchongan