Extjs Core 3.0 Beta 릴리즈

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

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

• 릴리즈노트 (ext 블로그)
• API
• 다운로드
• Cross Browser Javascript Library 샘플
• Carousel 샘플
• LightBox샘플
• Simple Menu샘플
• CrossBrowser : JSONP 샘플
• Simple Tab샘플
• Combination샘플(Carousel + LightBox + Menu + JSONP)
• 매뉴얼
• extjs3.0 미리보기

 

ext-core-3.0-beta1.zip

extCore매뉴얼.pdf

 

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

ExtJS_2.2.1_02.zip