Out of memory...

뭐가 다른건지 잘 알지 못하겠어서 forum에 가서 뒤적였더니 누군가가 이미 질문을 하고 Animal(유명하군... 저게 진짜 그 사람 얼굴일까??? 중후하게 생긴게 분위기가 숀 코넬린데 ㅋ)님이 답글을 이미 달아놓았다.

renderTo renders the Component into the specified existing element.

==> renderTo는 기존의 element에 component를 rendering 하는 것이다.(즉, 컴퍼넌트 내의 새로운 element를 생성해서 사용할 때 사용한다는 말)

applyTo uses the specified alement as the main element of the Component. A Component created using applyTo does not need rendering - its main element already exists.

==> applyTo는 component의 기본 element에 적용시킬 때 사용.  applyTo를 이용해 생성된 component는 rendering을 필요로 하지 않는다. (기본 element는 component가 생성될 때 이미 만들어지므로)

contentEl is only for Panels. It simply moves the specified element into the body of the Panel when the Panel is rendered to use... as the content!

==> contentEl은 Panel에서만 사용됩니다. Panel이 생성되어진 이후 content와 같은 지정된 element를 Panel의 body로 손쉽게 넣을 수 있습니다.


대충 이런 느낌? ㅋㅋㅋ

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를 보여준다.
    });
-------------------------------------------------------------------------------------------------