ExtJS2.0 실용적이고 간단한 튜토리얼의 이벤트 처리

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

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

이 단추를 누르면 onclick 이벤트를 터치하고 onclick 이벤트 처리 함수에 지정된 코드를 실행합니다. 여기서 함수 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();
});