ExtJS 3.x에서 JSONStore의 url 동적으로 변경하기

요즘 ExtJS 3.1을 쓰고 있습니다. 한 2년전 정도에 구경만 해보고 만져보지 않던 Extjs를 만지느라 고생하고 있습니다. ㅎㅎ 일반적으로 많이 쓴 prototype.js나 요즘 대세인 jQuery식의 JS 프레임워크와는 달리 Extjs는 UI쪽에 치중된 녀석(YUI도 비슷하죠)인 관계로 사용하는 접근방식이 많이 달라서 적응될려면 시간이 좀 필요할 듯 합니다.

만져본지 얼마 안되어서 ExtJS에 대해서 많은 걸 말하기는 그렇지만 예전에 받았던 느낌대로 ExtJS가 제공해주는대로 사용한다면 아주 쉽게 Rich한 UI를 만들어 낼 수 있지만 그 이상 뭔가 하려면 꽤나 고생이 필요할 듯 하다는 인상은 여전히 가지고 있습니다. 버전이 그사이 많이 올라가서 따끈따끈한 3.1을 쓰고 있지만 마치 ASP.NET을 쓰는듯한 느낌입니다. JSON형태로 설정 옵션에 셋팅을 쭉해주고 바인드해버리면 UI에 척!하고 달라붙어버리고 쉽게 핸들링하는.... 머 ExtJS를 소개하려고 하는건 아니니까요....

Json데이터를 Ajax로 불러오는 JsonStore가 있습니다. 간단한 예제는 Advanced DataView Example를 보시면 됩니다. JsonStore에 프로퍼티로 url프로퍼티가 있고 url프로프티를 이용해서 Ajax로 JSON데이터를 요청할 URL을 적어주면 됩니다. 위 Example의 소스를 참고하면 아래의 형태가 됩니다.


this.store = new Ext.data.JsonStore({
    url: 'get-images.php',
    root: 'images',
    fields: [
        'name', 'url',
        {name:'size', type: 'float'},
        {name:'lastmod', type:'date', dateFormat:'timestamp'}
    ],
    listeners: {
        'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
    }
});
this.store.load();

파라미터를 설정하는 프로퍼티는 따로 있긴 하지만 저는 url자체를 변경해야하는 이슈가 있었습니다. 일반적인 JS를 다루는 습관처럼 간단히 접근했습니다.


console.log(this.store.url); // get-images.php
this.store.url = "/test.html";
console.log(this.store.url); // /test.html
this.store.load(); // it's request to GET http://127.0.0.1:8000/examples/view/get-images.php?_dc=1261648849285

그냥 간단히 store.url의 값을 바꿔주려고 한거였는데 값은 정상적으로 바뀐 것을 확인할 수 있었지만 정작 요청을 날리기 위해서 store.load()를 하면 기존에 셋팅되어 있던 URL로 요청이 발생했습니다. 실제 Requet를 날릴때는 store.url이 아닌 다른 곳에 저장된 곳에 있는 URL이 요청이 발생하는 듯 합니다.

JSonStore의 Config Option url부분을 보면 아래와 같이 나와있습니다.
If a proxy is not specified the url will be used to implicitly configure a HttpProxy if an url is specified. Typically this option, or the data option will be specified.

Config Option의 proxy로 명확한 HttpProxy의 url 대신 쓰인다는 듯 합니다.


this.store = new Ext.data.JsonStore({
    proxy: new Ext.data.HttpProxy({
        url: 'get-images.php', 
        method: 'POST',
    })
})

실제로는 위처럼 proxy로 HttpProxy를 지정해 주어야 하는데 특별히 지정하지 않고 store.url로 설정을 간소화 할 수 있습니다. 실제로 Request가 날라가는 주소는 store.proxy.url이기 때문에 store.url을 바꾸어도 실제 요청에는 영향을 끼치지 못하는 것입니다. HttpProxy에는 setUrl()이라는 메서드가 존재하기 때문에 이 메서드를 이용해서 URL을 변경해 줄 수 있습니다. (관련해서 찾다보니 이런식으로 사용해야 하는 것이 3.x버전부터인듯 합니다.)



this.store.proxy.setUrl("/test.html");
this.store.load();

위와같이 사용하면 됩니다. 솔직히 url이라는 HttpProxy로 자동으로 설정해주는(내부 구조는 정확히 모르지만) conrig Option을 만들어 놓고 set을 할 수 없다는 것은 잘 이해가 가지 않고 거기에 this.store.proxy.setUrl이라는 좀 긴 체인으로 된 호출이 나오게 되는건 아쉽네요.(제가 모르는건지...)


this.store = new Ext.data.JsonStore({

    setUrl: function(newUrl) {
        this.proxy.setUrl(newUrl);
    }

})
this.store.setUrl("/test.html");
this.store.load();

this.store.proxy.setUrl처럼 길게 쓰는게 실다면 store 내부에 위처럼 proxy.setUrl을 호출하는 메서드를 추가하여 사용할 수도 있습니다. 어느쪽이 좋은지는 머 각자 선택하는 것이겠죠.

Outsider's Dev Story

ExtJS 3.x에서 JSONStore의 url 동적으로 변경하기

Comments List

Leave a Reply

Comments