이 글은 Chrome 16, IE8 , ExtJS 4.0.7 기준이다.

크롬, 사파리, 파이어폭스에서 잘 작동했는데 IE8에서 'events' is null or not an object 에러가 나면 다음 두가지를 확인한다.

콤마

ExtJs4가 IE에서 가장 문제가 되는건 콤마(,)다. Javascript는 리터럴 객체에서 프로퍼티를 구분하는 구분자로 콤마를 사용하는데, IE는 객체의 마지막 프로퍼티 뒤에 콤마가 있으면 에러가 난다

    var foo = {
        property1: "some value",
        method1: function(){
            // some code...
        }, 
        property2: [
            { property: "some value" },
            { property: "some value" },     // <- here!!
        ],  // <- here!!
    }

이게 다른 브라우저는 다 괜찮은데, IE에서만 문제가 된다. ExtJS는 구조적으로 3,4중으로 중첩된 괄호가 생기기 일쑤인데, 어디 한 군데 콤마가 남아 있으면 페이지가 안 뜬다. ExtJS가 IE에서 문제가 생기면 10의 9은 콤마 때문이다.

이 문제는 JSLint나 JSHint를 통해 디버깅할 수 있다. WebStorm은 둘다 내장해서 inspections 설정을 통해 에러표시를 해준다.

근데 사실 이건 ExtJS개발하려고 하는 사람은 한번씩 겪어나 이미 악명(?)을 접했을 문제이고, 아주 개떡같은 문제를 하나 더 언급하겠다.

bootstrap.js 제거

bootstrap.js는 Extjs4에서 제공하는 모듈인데, 동일 패스에 있는 모듈들을 preloading을 한다. 그런데, 이를 사용할 경우 페이지가 로드 된 후 25~30초 뒤에 'events' is null or not an object 오류가 발생한다. 그냥 가만히 있어도 난다. 그래서 액션을 취하고 있는 경우 그 액션으로 인해 에러가 났다고 오해하기 쉽다. 내 경우에는 DnD오류라 생각하고 6시간쯤 허비했다. 콤마 유무를 확인한 후에도 이 에러가 난다면 다음을 확인해야 한다.

ext-base.js, bootstrap.js를 뺀다. ext-all.js만 있으면 되며, ext-base.js도 필요없다.

Sencha Forum에는 4.0.1이후 fixed된것 처럼 되어있지만, 4.0.7 를 사용중인데, bootstrap.js를 제거하지 않으면 동일한 문제가 발생한다. 이 에러는 Ext.cache[...].events가 없어서 나는 에러인데, ext-all.js의 문제만 해결된게 아닌가 싶다.