Out of memory...

Ext-based event가 실행되기 전에 각각의 event가 등록이 되어야 한다. 일반적으로 addEvent method를 이용한다. 아래의 예제를 보자.


하나 이상의 event를 등록할 때 아래와 같이 해도 된다.


Object 형식을 event로 지정할 수도 있다.


event를 생성하였으면 event handler가 필요하다.


sayHello event에 대한 event handler를 생성하였다. 3강에서의 예제처럼 event가 발생하면 firebug의 console 창으로 'Hello stranger' 라는 message를 출력하는 event이다. 아래와 같이 event를 호출해본다.

event가 호출되며 Firebug console 창에 'Hello stranger' 라는 message가 호출되는 것을 볼 수 있다.

console 창에 나타난 결과:

대부분의 event들은 파라미터를 사용한다. 'sayGoodbyeFn' event에 2개의 파라미터를 주어보자.

2개의 파라미터를 인자로 받는 sayGoodbyeFn 이라는 event를 생성하였다.
이제 myObservable.on 함수를 이용하여 event를 호출해 보자. 아래와 같이 추가해 준다.

FireFox에서 실행을 해보자.

console 결과:

 
event를 호출할 때 scope 영역을 지정해 주지 않으면 호출한 component 안에서만 유효하다는 것을 기억해 두자.

event가 더 이상 필요없다면 삭제해 주는 method가 있다.

부모 노드의 이벤트가 자식 노드에게 상속되길 원하지 않는 경우에는 stopEvent()를 호출하여 정지시켜준다.

아래는 마우스 우클릭 하였을 때, 부모 노드('myDiv')는 브라우저의 메뉴를 보여주지만, 자식 노드('meHref')는 커스텀 메뉴 컨텍스트를 보여주는 예제이다.

파이어 폭스에서 확인을 해보자.(당연한 얘기겠지만, FireBug 설치는 필수이다.)
IE에서 실행하려 하면 script error를 뿜어낼 것인다.(console error)

-------------------------------------------------------------------------------------------------
 // 마우스 우클릭을 하였을 때 실행할 이벤트
Ext.get('myDiv').on('contextmenu', function(eventObj, elRef) { 
    // 콘솔에 글을 뿌려준다.
    console.log('myDiv contextmenu Handler, source elment ID: ' + elRef.id);
    });

// 마우스 우클릭을 하였을 때 실행할 이벤트
Ext.get('myHref').on('contextmenu', function(eventObj, elRef) {
    eventObj.stopEvent();   // 다른 이벤트는 실행하지 않는다.(자신의 이벤트만 실행을 위하여)
    console.log('myHref contextmenu Handler, source elment ID: ' + elRef.id);   // 콘솔에 글을 뿌려준다.

    if (!this.ctxMenu) {                    // ctxMenu 객체가 없다면 새로 생성하는 코드
        this.ctxMenu = new Ext.menu.Menu({  // ctxMenu는 Ext.menu.Menu의 객체
        items : [{                          // item의 내용 (항상 JSON Store 형태로)
        text : "This is"                    // 첫 번째 item text에 'This is'
        },{
        text : "our custom"                 // 두 번째 item text에 'our custom'
        },{
        text : "context menu"               // 세 번째 item text에 'context menu' 를 대입
        }]
        });
    }
   
    this.ctxMenu.show(elRef);               // ctxMenu를 보여준다.
    });
-------------------------------------------------------------------------------------------------