Extjs 구성 요소의 이벤트 처리

ExtJS는 강력한 이벤트 처리 메커니즘을 제공하여 이러한 이벤트 처리 메커니즘을 통해 사용자의 동작, 감독에 응답한다
컨트롤 상태 변화, 컨트롤 보기 정보 업데이트, 서버와 상호작용 등등.이벤트 통합
Ext.EventManager 개체 관리, 브라우저 W3C 표준 이벤트 개체 Event에 대응하여 Ext 패키지됨
Ext.EventObject 이벤트 객체.이벤트 처리를 지원하는 클래스(또는 인터페이스)는 Ext.util입니다.Observable, 이 클래스를 계승하는 구성 요소나 클래스는 대상에 이벤트 처리 및 응답 기능을 추가합니다.
먼저 우리는 표준 html의 이벤트 처리를 보고 아래의 html 코드를 본다.

<script>
function a() {
alert('some thing');
}
</script>
<input id="btnAlert" type="button" onclick="a();" value="alert " />

이 단추를 누르면 원클릭 이벤트를 터치하고 원클릭 이벤트 처리 함수에 지정된 코드를 실행합니다.
함수 a의 코드를 직접 실행하면 간단한 정보 알림 상자를 팝업합니다.위의 코드를 간단하게 수정하고,
내용은 다음과 같습니다.

<script>
function a()
{
alert('some thing');
}
window.onload=function(){
document.getElementById("btnAlert").onclick=a;
}
</script>
<input id="btnAlert" type="button" value="alert " />

위의 코드는 문서를 불러올 때 btnAlert의 onclick에 직접 값을 부여하여 매우 명확하게 가리킨다
btnAlert의 onclick 이벤트 응답 함수는 a입니다. 여기 a 뒤에 괄호 "()"를 사용할 수 없습니다.
ExtJS에서 구성 요소의 이벤트 처리는 위와 비슷합니다. 아래 코드를 보십시오.

<script>
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="alert " />

Ext.get("btnAlert")은 페이지의 버튼 btnAlert와 연결된 Ext.Element 객체를 가져와 직접 조정할 수 있습니다.
이 대상의 addListener 방법으로 대상에게 이벤트를 추가하여 앞의 효과를 실현합니다.addListener 호출
방법의 코드에서 첫 번째 파라미터는 이벤트 이름을 표시하고, 두 번째 파라미터는 이벤트 프로세서나 전체 응답 함수를 표시합니다.
ExtJS는 이벤트 대기열을 지원하며 대상의 이벤트에 여러 이벤트 응답 함수를 추가할 수 있습니다. 다음 코드를 보십시오.

Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a);
});

addLinster 방법의 또 다른 약어 형식은 on입니다. addListener 방법을 두 번 호출했기 때문에 당점
버튼을 눌렀을 때 메시지가 두 번 튀어나온다.
물론 ExtJS는 다음 코드와 같은 이벤트 지연 처리나 이벤트 처리 캐시 기능도 지원합니다.

Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});

addListener를 호출할 때 지정한delay를 2000으로 전달하기 때문에 사용자가 단추를 눌렀을 때
이벤트 응답 함수를 바로 실행하지 않고 2000밀리초, 즉 2초 후에야 알림 메시지 상자를 팝업합니다.
물론 Ext 이벤트를 사용할 때 우리는 일반적으로 컨트롤에 직접 이벤트를 하고 모든 컨트롤에 어떤 이벤트를 포함하는지
언제 터치할지, 터치할 때 전달되는 매개 변수 등.
ExtJS 프로젝트의 문서에 자세한 설명이 나와 있습니다.보다
모든 구성 요소 Component에 beforedestroy 이벤트가 포함되어 있다면, 이 이벤트는 Ext에서 삭제됩니다
구성 요소가 실행될 때 이벤트 응답 함수가false로 되돌아오면 구성 요소의 제거 작업을 취소합니다.

Ext.onReady(function(){
var win=new Ext.Window({
title:" ", height:200, width:300
});
win.on("beforedestroy",function(obj){
alert(" ， !");
obj.show();
return false;
});
win.show();});

창 대상의 beforedestroy 이벤트 응답 함수가false로 되돌아오기 때문에 이 프로그램을 실행하면
이 창을 닫을 수 없습니다.구성 요소의 이벤트 감청기는 구성 요소의 설정 속성에 직접 설명할 수 있습니다. 예를 들어
다음 코드는 앞에서 구현한 기능과 같습니다.

Ext.onReady(function(){
var win=new Ext.Window({
title:" ",
height:200, width:300,
listeners:{"beforedestroy":function(obj){
alert(" ， !");
obj.show(); return false;
}}
});
win.show();});

ExtJS의 기본적인 이벤트 처리 및 사용 방법을 이해하면 당신의 응용 프로그램에서 마음대로 이벤트를 진행할 수 있습니다
관련 처리 작업이 시작되었습니다.