[ExtJS 3.2] 이벤트 핸들러 등록하기

간간이 맡게 되는 웹프로젝트 덕에 이번에 ExtJS를 2.*에서 3.2 버젼으로 바꿔보았습니다.
마지막으로 볼때만해도 3.0 core 베타가 막 나올 때였는데 벌써 3.2가 나왔다니.
ExtJS Designer 라는 UI 툴도 생겨있던데 그리 비싸지는 않지만 유료라는 점..
솔직히 얼마 되지 않은 가격이기에 구매해볼까 알아봤는데 어느 분의 블로그에서처럼 구매하기도 쉽지많은 않거니와
데모버젼에서는 다소 버그가 있는 듯 확인이 되서 구매는 보류를...그리고 사이트는 왜이리 느려진건지...

다행히 기존 코드와 대부분 호환되는 거라 다행이었고.
이전버젼에서 나왔던 버그들도 이젠 거의 해결된 듯 보였다.(2.*를 쓸땐 별도의 버그패치파일을 만들어 사용)
당시 3.0 베타를 도입하지 않았던 가장 큰 이유중의 하나인 Extjs의 iframe 지원 플러그인인 miframe도 버젼업되어
3.*을 지원하고 있었기에 크게 어려운 점은 없었네요 

몇몇 호환되지 않았던 플러그인도 함께 마이그레이션을 해주니 동작엔 무리가 없었을 뿐더러
오히려 그동안 자체적으로 만들었던 플러그인들을 3.x대에서 지원하는 기능으로 바꿔주니 더 깔끔해진듯..

덕분에 어떤점이 바뀌었을까 궁금해 기존 소스와 비교해보다 발견한 이벤트 핸들러 등록방법..
기존 코드에서는 이벤트 핸들러를 등록하는 방법으로 on을 사용해왔었는데요.

예를 들어
body 부분을 c라고 했을 때 이벤트, 호출이벤트함수,scope를 인자로 가지는 on을 사용하여 이벤트 핸들러를 정의하였습니다.
코드로 살펴보면 다음과 같습니다.         

var c = this.body;  
c.on("click", this.onClick, this);   

지금은 다음과 같이 바뀌어져 있네요.

this.mon(c,{scope:this, click:this.onClick});

별거 아닌 듯 보이는 이러한 이벤트 핸들러처리방법을 통해 ExtJS의 전반적인 성능개선을 하고 있는셈.
왜냐하면 기존의 이벤트 핸들러를 등록하는 방법인 on은 메모리 누수의 문제가 있었는데
그러한 문제를 해결한 방법이 Ext.Component의 mon을 이용한 이벤트 핸들러 처리방법입니다.

사실 이를 해결한 mon이 Ext.Component에 추가된 것은 3.x가 아닌 2.1 이후 부터이지만 
ExtJS의 컴포넌트의 기본 핸들러에서는 계속 사용되어 왔기에
결국 패치나 커스텀핸들러를 재등록하는 방법으로 사용해 왔었는데요

3.x에서는 Extjs 컴포넌트의 핸들러가

this.mon(this.someEl, 'click', this.onClick, this); 

와 같은 방법으로 모두 변경되어 있어 별도의 패치 없어도 다소의 성능개선을 노릴수 있다는 점이 좋아졌달까?

3.x는 2.x에서 크게 변경되었다기 보다 그동안 제기되어 왔던 소소한 문제점들에 대해 

전반적으로 새로이 리뉴얼한 느낌이네요.