RESTFul 한 ExtJS

오늘따라 많이 포스팅한다는 느낌이... ( 데꾸벅 무리하다... ㅡ.,ㅡ; )
사실 뒤에 앉아 있는 울 겸댕이 윤부장의 친구분이 이 블로그를 보고 계신다기에 팁으로 올려본다.

RESTFul 한 Web application을 개발하기 위하여 부단히 노력하고 계신분들을 위한 포스트~
크헬헬~


먼저 이곳을 먼저 보세요.. : RESTful Web Services (번역중~ 크헬헬)



이제껏 RESFul하다고 하면서 개발할때 사실 2.0이전 버전에서는 모든 데이타를 parameter값들에 의해서 일일이 encodeURIComponent까지 친절히 적어주면서 작업을 하였으나 2.0 버전부터는 REST를 Full 지원하게 되면서 상당히 작업하기가 편해진것은 사실이다.

Request를 보낼때 다음과 같이 보내면 된다.....

    Ext.Ajax.request({
        url: 'process.json',
        method:'delete',
        jsonData: {foo:'bar'},   //보낼 json타입을 파라미터 값이아니라 json객체로 ..
        headers: {
            'Content-Type': 'application/json-rpc' // application/json이 아님에 주의
        }
    });

단, 아직은 완전한 REST 같지 않아서 다음과 같이 오버라이드해야 한다.

Ext.override(Ext.form.Action.Submit, {
    run : function(){
        var o = this.options;
        var method = this.getMethod();
        var isGet = method == 'GET';
        if(o.clientValidation === false || this.form.isValid()){
            Ext.Ajax.request(Ext.apply(this.createCallback(o), {
                form:this.form.el.dom,
                url:this.getUrl(isGet),
                method: method,
                params:!isGet ? this.getParams() : null,
                isUpload: this.form.fileUpload
            }));
        }else if (o.clientValidation !== false){ // client validation failed
            this.failureType = Ext.form.Action.CLIENT_INVALID;
            this.form.afterAction(this, false);
        }
    }
});

Ext.lib.Ajax.request = function(method, uri, cb, data, options) {
    if(options){
        var hs = options.headers;
        if(hs){
            for(var h in hs){
                if(hs.hasOwnProperty(h)){
                    this.initHeader(h, hs[h], false);
                }
            }
        }
        if(options.xmlData){
            if (!hs || !hs['Content-Type']){
                this.initHeader('Content-Type', 'text/xml', false);
            }
            method = (method ? method : (options.method ? options.method : 'POST'));
            data = options.xmlData;
        }else if(options.jsonData){
            if (!hs || !hs['Content-Type']){
                this.initHeader('Content-Type', 'application/json', false);
            }
            method = (method ? method : (options.method ? options.method : 'POST'));
            data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
        }
    }
   
    return this.asyncRequest(method, uri, cb, data);
};

Ext.lib.Ajax.asyncRequest = function(method, uri, callback, postData) {
    var o = this.getConnectionObject();
    if (!o) {
        return null;
    }
    else {
        o.conn.open(method, uri, true);
       
        if (this.useDefaultXhrHeader) {
            if (!this.defaultHeaders['X-Requested-With']) {
                this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
            }
        }
       
        if(postData && this.useDefaultHeader && !this.headers['Content-Type']){
            this.initHeader('Content-Type', this.defaultPostHeader);
        }
       
        if (this.hasDefaultHeaders || this.hasHeaders) {
            this.setHeader(o);
        }
       
        this.handleReadyState(o, callback);
        o.conn.send(postData || null);
       
        return o;
    }
};

참고 : extjs.com 포럼글 중에서