블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

'ext jsonp'에 해당되는 글 1건

  1. 2009.04.07 Extjs Core 3.0 Beta 릴리즈 4



ext3.0 베타버전이 릴리즈 됐다.
1.01a 버전부터 써오면서 라이센스정책을 쭈욱 지켜봤는데 이번 ext core 3.0는  MIT라이센스로 배포가 되었다.
즉 아무렇게 배포,수정이 가능하다는 얘기다.

현재 안정버전인 ext2.2나 그 이전 버전의 경우 core 파일이 obfuscating되어 있었던 반면 이번 ext3.0 Beta버전의 경우는 MIT정책에 따라 모든 소스가 친절하게도 주석까지 달려있어서 분석하기도 한층 쉬워졌다.
시간되시는 분들은 한번씩 까(?) 보시는것도 괜찮을듯... ㅎㅎ 데꾸벅 생각이였음돠~

 



 

JSONP 소스

Ext.ns('Ext.ux');

Ext.ux.JSONP = (function(){
    var _queue = [],
        _current = null,
        _nextRequest = function() {
            _current = null;
            if(_queue.length) {
                _current = _queue.shift();
       _current.script.src = _current.url + '?' + _current.params;
       document.getElementsByTagName('head')[0].appendChild(_current.script);
            }
        };

    return {
        request: function(url, o) {
            if(!url) {
                return;
            }
            var me = this;

            o.params = o.params || {};
            if(o.callbackKey) {
                o.params[o.callbackKey] = 'Ext.ux.JSONP.callback';
            }
            var params = Ext.urlEncode(o.params);

            var script = document.createElement('script');
        
 script.type = 'text/javascript';

            if(o.isRawJSON) {
                if(Ext.isIE) {
                    Ext.fly(script).on('readystatechange', function() {
                        if(script.readyState == 'complete') {
                            var data = script.innerHTML;
                            if(data.length) {
                                me.callback(Ext.decode(data));
                            }
                        }
                    });
                }
                else {
                     Ext.fly(script).on('load', function() {
                        var data = script.innerHTML;
                        if(data.length) {
                            me.callback(Ext.decode(data));
                        }
                    });
                }
            }

            _queue.push({
                url: url,
                script: script,
                callback: o.callback || function(){},
                scope: o.scope || window,
                params: params || null
            });

            if(!_current) {
                _nextRequest();
            }
        },

        callback: function(json) {
            _current.callback.apply(_current.scope, [json]);
            Ext.fly(_current.script).removeAllListeners();
            document.getElementsByTagName('head')[0].removeChild(_current.script);
            _nextRequest();
        }
    }
})();


 

 

 JSONP를 이용한 Flickr이미지 가져오기

<script>
Ext.onReady(function() {
    var resultTemplate = new Ext.Template.from('result-template');
   
    var updateResults = function(data) {
        Ext.fly('resultset').update('');
        Ext.each(data.items, function() {
            this.src = this.media.m;
            resultTemplate.append('resultset', this);
        });
    }
   
    Ext.get('search-form').on('submit', function(ev) {
        ev.preventDefault();
        Ext.ux.JSONP.request('http://api.flickr.com/services/feeds/photos_public.gne', {
            callbackKey: 'jsoncallback',
            params: {
                format: 'json',
                tags: Ext.fly('search-value').dom.value,
                tagmode: 'all',
                lang: 'en-us'                           
            },
            callback: updateResults
        });
        return false;
    });
})
</script>

 

<form id="search-form" action="#">
    <input type="text" value="ExtJS, Screenshot" id="search-value">
    <button type="submit" id="search-button">Search</button>           
</form>

<div id="resultset"></div>

<textarea id="result-template" style="display: none">
    <div class="result">
        <div class="header">
            <h4>{title}</h4>
            <h5>{author}</h5>
        </div>
        <img src="{src}" title="{title}">
    </div>
</textarea>



 

 jQuery를 이용한 Flickr이미지 가져오기

  $.getJSON(
    "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
    function(data){
      $.each(data.items, function(i,item){
        $("<img/>").attr("src", item.media.m).attr("onclick","location.href="+item.media.link).appendTo("#result");
        $(document.body).unblock();
      });
    });

 

 참고로 Rhio.Kim's Extjs 2.2.1 Class Diagram

 

'Scripter > EXTJS' 카테고리의 다른 글

Ext js 틀고정 그리드  (1) 2009.11.15
Ext.Updater 깜빡거림 방지  (0) 2009.05.06
Examples Of ExtJS in Action  (2) 2009.03.31
extjs RowAction 붙이기  (1) 2009.03.31
extjs 2.2의 IE에서 iframe document load 버그패치  (0) 2009.01.21
Post by 넥스트리소프트 데꾸벅(techbug)
, |