Jace's Blog

extjs를 사용하여 특정 엘리멘트의 내용을 ajax로 업데이트 할 수 있다.
예를들면 다음과 같다.

Ext.get("myId").getUpdater().update({
    url: 'test.jsp',
    scripts: true //response의 html(마크업)안에 포함된 javascript를 인식시키고자 할경우
});

Ajax를 통해서 특정 엘리멘트(DOM Object) 의 html을 변경할 경우 Ajax를 통해서 응답받은 html(마크업)안에 포함된
javascript는 기본적으로 인식되지 않는다.

extjs에선 update를 이용하여 이를 해결 할 수 있으며 scripts: true 옵션을 주면
응답받는 html(마크업)안에 포함된 javascript를 인식 시킬 수 있다.

하지만 안되는 경우가 있다.
본인이 안되었던 경우의 코드를 보면

//호출부
<script>
    function test() {
        Ext.get("myId").getUpdater().update({
            url: 'test.jsp',
            scripts: true
         });
    }
</script>

//응답부
<script>
    function write() {
        alert("Hello...");
    }
</script>
<div>
    <input type="button" value="테스트" onClick="write();" />
</div>

이런경우 응답부의 테스트버튼을 누르면 Hello alert창이 떠야하나
뜨지 않는다. 이를 firebug를 통해서 확인해보면
Ext.EventObject is undefined 에러가 발생하는걸 확인 할 수 있다.
맨처음에는 Ext의 Bug일거라 의심했었는데

확인해 보니 Ext.EventObject의 경우
Ext.onReady를 통해서 초기화 된다고 한다. 즉 Ext를 통해서 초기화 되지 않는 일반적인 javascript의 function에서
Ext.Updater.update()의 scripts:true를 사용할 수 없다는 말이 된다.

해결방법은 Ext.onReady를 통해서 해당 function을 초기화 시켜주면 된다.
즉 해당 페이지에서 사용될 클래스를 정의하고 해당 클래스를 Ext를 통해서 호출해주면된다.

<script>
MyClass = function() {
    init: function() {

    },
    test: function() {
        Ext.get("myId").getUpdater().update({
            url: 'test.jsp',
            scripts: true
         });
    }
}();

Ext.EventManager.onDocumentReady(MyClass .init, MyClass , true);
</script>

<div id="myid"></div>
<input type="button" value="실행" onClick="MyClass.test();" />

이런식의 처리해주면 응답은 html(마크업)안의 javascript도 정상적으로 인식된다.

관련정보 : http://extjs.com/forum/showthread.php?t=34084