Ext JS - 3. Burst Events in action

부모 노드의 이벤트가 자식 노드에게 상속되길 원하지 않는 경우에는 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를 보여준다.
    });
-------------------------------------------------------------------------------------------------