Ext JS - 4. Events 등록과 Event Listeners

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

var myObservable = new Ext.util.Observable();
myObservable.addEvents('sayHello');
myObservable.addEvents('sayGoodbye');

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

myObervable.addEvents('sayhello', 'saygoodbye');

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

myObservable.addEvents({
    'sayHello'        : true,
    'sayGoodbye'  : true
})

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

myObservable.on('sayHello', function() {
console.log('Hello stranger');
});

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

myObservable.fireEvent('sayHello');

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

완성 src :

var myObservable = new Ext.util.Observable();

myObservable.addEvents({
    'sayHello' : true,
    'sayGoodbye' : true
    })
   
myObservable.on('sayHello', function() {
console.log('Hello stranger');
});

myObservable.fireEvent('sayHello');

console 창에 나타난 결과:

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

var sayGoodbyeFn = function(firstName, lastName) {
console.log('Goodbye ' + firstName + ' ' + lastName + '!');
}
myObservable.on('sayGoodbye', sayGoodbyeFn);

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

myObservable.fireEvent('sayGoodbye', 'John', 'Smith');

FireFox에서 실행을 해보자.

console 결과:

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

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

myObservable.removeListener('sayGoodbye', sayGoodbyeFn);