ExtJs 이벤트 처리

1. 이벤트의 3 중 바인딩 방식
    HTML/DHTML
    DOM
    EXTJS
첫 번째: 페이지에 function을 직접 쓰면 됩니다. 구성 요소 하나의function을 붙여서 터치하면 됩니다. 두 번째는 DOM을 조작하고 세 번째는 프레임워크로 조작합니다. [여기는 EXTJS입니다]

(function(){
	Ext.onReady(function(){
			if(Ext.isIE){
			document.getElementById("btn2").attachEvent("onclick",function(){
				alert(" ")
			});
			}else{
			document.getElementById("btn2").addEventListener("click",function(){
                alert(" ");
			});	
			}
			// 
			Ext.get('btn3').on("click",function(){
				alert(" ");
			});
	});
})();

다음 단락은 잘 연구할 필요가 있다. [이벤트 귀속으로 설계] 첫 번째 버튼은 두 번째 버튼에 귀속된 것이다. 두 번째 버튼은 첫 번째 버튼에 클릭 이벤트를 등록했기 때문에 두 번째 버튼이 사라지기 전에 첫 번째 버튼이 눌린 후에 이벤트를 촉발한다. 그러나 두 번째 버튼이 세 번째 버튼으로 인해 사라질 때첫 번째 단추의 클릭 이벤트가 자동으로 사라졌습니다.

(function(){
	Ext.onReady(function(){
		var tbar = Ext.create('Ext.toolbar.Toolbar',{
			renderTo:Ext.getBody(),
			width:500,
			items:[
				{xtype:'button',id:'create',text:'create'},
				{xtype:'button',id:'delete',text:'delete'},
				{xtype:'button',text:' ',handler:function(){
					var c = Ext.getCmp("delete");
					if(c){
						c.destroy();
					}
				}}			
			]
		});
		
		var deleteB = Ext.getCmp("delete");
		deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){
			alert(' ');
		});
		//Ext.getCmp("create").on("click",function(){});
	});
})();

다음 코드는 매우 재미있습니다: 구성 요소에 함수를 추가합니다

Ext.onReady(function(){
	Ext.EventManager.addListener("btn5",'click',function(){
		alert(" ");
	})
})