블로그 이미지

카테고리

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

최근에 올라온 글

최근에 달린 댓글

'extjs 2.2'에 해당되는 글 2건

  1. 2009.01.21 extjs 2.2의 IE에서 iframe document load 버그패치
  2. 2008.08.07 Ext2.2 Release 11

얼마전 부터 방명록에 몇몇 분들이 iframe 안에서 grid panel이 동작하지 않는다고 하여 포럼글을 찾아보던중 다음과 같은 버그가 존재하였다.

FF3, Opera, IE6에서 document를  load시 load타임이 맞지 않아서 생기는 버그였다. 기존 2.1버전에서 2.2 버전으로 업그레이드 하면서 생긴 버그이다. 만일  ext의 프리미엄 멤버라면 svn을 통해서 해당 내용들을 모두 업데이트 받았겠지만 가난한 나같은 개발자들은 그러지 못한 관계로 포스팅한다. 

먼저 가장 최근의 ext-2.2 버전을 다운로드한다. ( 같은 버전이라도 버그패치되는 대로 패치하기 때문에 매일매일 다를수 있다. 다운로드 받거든 이미 받았던 버전과 용량체크를 해 보면 바로 알수 있다.. ㅡ"ㅡ; )

ext-all-debug.js 를 이용한다면 다음과 같이 3개 메쏘드를 바꿔준다.

fireDocReady(),  initDocReady(), onDocumentRead()

1580줄 fireDocReady를 다음과 같이 바꿔준다.

 var fireDocReady = function(){
        docReadyState = true;
        if(Ext.isGecko) {
             document.removeEventListener("DOMContentLoaded", fireDocReady, false);
        }

        if(docReadyProcId){
             clearInterval(docReadyProcId);
             docReadyProcId = null;
        }

        if(docReadyEvent && !Ext.isReady){
            Ext.isReady = true;
            docReadyEvent.fire();
            docReadyEvent.clearListeners();
        }
    };


1597줄의 initDocReady를 다음과 같이 바꿔준다.

    var initDocReady = function(){
        docReadyEvent = new Ext.util.Event();

        if(Ext.isReady){ return;}

        E.on(window, 'load', fireDocReady);

        if(Ext.isGecko) {
            document.addEventListener('DOMContentLoaded', fireDocReady, false);
        }
        else if(Ext.isIE){
                                 
            document.onreadystatechange = function(){
                if(document.readyState == 'complete'){
                     document.onreadystatechange = null;
                     fireDocReady();
                }
            };
                                
             if(window == top){   //Use the default readystatechange/onload as primary detection mechanism for frames 
                   var doScrollChk = function(){
                    try{
                       document.documentElement.doScroll('left');
                       Ext.isReady || fireDocReady();
                   }catch(e){
                       Ext.isReady || setTimeout(doScrollChk ,0);
                   }
                  };
                  doScrollChk();
               }
          
        } else if(Ext.isOpera){
              document.addEventListener( 'DOMContentLoaded', function () {
                    if (Ext.isReady) return;
                    for (var i = 0; i < document.styleSheets.length; i++)
                          if (document.styleSheets[i].disabled) {
                                  setTimeout( arguments.callee, 0 );
                                  return;
                          }
                           Ext.isReady || fireDocReady();
                           document.removeEventListener("DOMContentLoaded", arguments.callee, false);

                }, false);
        }
        else if(Ext.isSafari){
           var re = /complete|loaded/i;
            docReadyProcId = setInterval(function(){
                if(re.test(document.readyState) ) {
                    Ext.isReady || fireDocReady();
                 }
            }, 10);
        }
    };


1743줄의 onDocumentReady를 다음과 같이 바꿔준다.

     onDocumentReady : function(fn, scope, options){
            if(!docReadyEvent){
                initDocReady();
            }
            if(docReadyState || Ext.isReady){
                options || (options = {});
                fn.defer(options.delay||1, scope);    ----------> 0을 1로 바꿔주면 된다.  defer(1)과 같은 효과
            }else{
                docReadyEvent.addListener(fn, scope, options);
            }
        },




직접 ext-all-debug.js를 수정하였을 경우는 다음과 같이 하면 되고 각각의 컴포넌트들을 수정하려면 아래 eventManager관련 파일을 찾아 덮어쓴후 다시 빌드하여 ext-all.js로 만들어 쓰면 된다. 





사족 : 조만간 올초에 3.0 이 나올텐데 다시 업그레이드 되겠죠~ 이클립스용 ext designer와 standalone designer도 벌써 3.0 버전용이 나와 있더군요.. ㅡ.,ㅡ;











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

Examples Of ExtJS in Action  (2) 2009.03.31
extjs RowAction 붙이기  (1) 2009.03.31
Extjs 3.0 Roadmap  (10) 2008.11.12
Ext2.2 Release  (11) 2008.08.07
ExtJS 2.1 릴리즈  (4) 2008.04.22
Post by 넥스트리소프트 데꾸벅(techbug)
, |

Ext2.2 Release

Scripter/EXTJS / 2008. 8. 7. 10:30

일전에 포스팅한 extjs 로드맵에서 언급했듯이 extjs 2.2 가 릴리즈 됐다.

그리고 데꾸벅의 한글화 부분(ext-2.2/build/locale/ext-lang-ko.js)도 추가적으로 패키징되어 들어가 있다. 캬햐햐
/**
 * Korean Translations By nicetip
 * 05 September 2007
 * Modify by techbug / 25 February 2008
 */
트리로더 확장과 불여우2에서 스크롤문제(overflow)와 IE6 버그(relative)일때 스크롤문제부분(스쿨학우여러분 땡큐 많이 참조했어요.. ^^)도 부분적으로 채택이 됐네요.. 크크..
FF3 Beta1에서 에러나던 버튼위치부분은... 쿨럭.. ㅡ.,ㅡ;

2.2 (2008 여름) : 릴리즈노트

  • Ext.Ajax 기능향상
  • Ext컴포넌트만의 초점을 맞춘(scoped) REST style지원
  • XML을 포함한 추가적인 TreeLoader 데이타로딩
  • 슬라이더 컴포넌트
  • 파일업로드 필드

릴리즈노트에 나타난 새롭게 추가된 기능들은 다음과 같다.

[ CheckboxGroup / RadioGroup ]

... },{
    xtype: 'checkboxgroup',
    fieldLabel: 'Multi-Column (horizontal)',
    columns: 3,
    items: [
        {boxLabel: 'Item 1', name: 'cb-horiz-1'},
        {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
        {boxLabel: 'Item 3', name: 'cb-horiz-3'},
        {boxLabel: 'Item 4', name: 'cb-horiz-4'},
        {boxLabel: 'Item 5', name: 'cb-horiz-5'}
    ]
},{ ...

각 개별적인 item으로만 적용했던 라디어버튼과 체크박스를 그룹핑하여 만든 컴포넌트가 추가되었다. [샘플보기]
사용자 삽입 이미지



[히스토리컴포넌트 추가] [샘플보기]
listeners: {
    'tabchange': function(tabPanel, tab){
        // Ignore tab1 since it is a separate tab panel and we're managing history for it also.
        // We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.
        if(tab.id != 'tab1'){
            Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
        }
    }
}

사용자 삽입 이미지

위의 탭기능중 sub-tab3 를 선택한위 상단 탭을 클릭햇을 경우 다시 돌아왔을때 sub-tab3이 선택되어 있게 만들어준다. 이전 버전에서는 별도의 글로벌변수로 선언해준뒤 사용했었는데 이번 릴리즈에는 포함되어 나와서 상당히 편할듯하다..
히스토리 컴포넌트 사용시에는 URL 핸들링이 하는지 URL자체가 변하는 효과를 볼수 있다.
사용자 삽입 이미지


[MultiSelect / ItemSelector] [데모보기]
이 기능은 사용자 확장기능에 올라왔던 기능인데 이번 릴리즈에 포함되었있다.
전통적인 방식의 <select multiple> 기능을 extjs로 구현한 것이다.
사용자 삽입 이미지


[FileUploadField][데모보기]
사용자 확장기능에서 가장 많이 찾던 swfFileUpload에서 차용한듯한 소스가 이번 릴리즈에 포함되어 있다. ajax fileupload를 찾는 국내 사용자에게는 상당히 유용한 컴포넌트가 될듯하다. Form 컴포넌트에 포함되어 있다.
var fibasic = new Ext.form.FileUploadField({
    renderTo: 'fi-basic',
    width: 400
});


[XmlTreeLoader] [데모보기]
사용자 확장기능이다. 이전 treeLoader와 사용법은 비슷하다.


[GMapPanel][데모보기]
사용자 삽입 이미지
구글맵을 보여줄수 있는 panel이 추가되었다.
이것또한 사용자 확장기능이였으나 이번 릴리즈에 포함되었다.








사실 새롭게 추가된 기능들만 보자면 로드맵에 나왔던 내용들은 거의 없다.
향상된 기능들이라면 Firefox3 및 IE8 버전을 지원하다는 내용과 드래그앤드랍 기능(특정DnD영역그리드패널 Row의 드래그엔 드랍, 폼내널에서의 드래그엔드랍), 그리도 속도 향상, status기능등이 많이 향상되었다.

또한 축약어 들이 많이 등장했는데 Ext.MessageBox()를 msg()와 같이 표현한다던가, 브라우저 버전에 대한 글로벌 변수 Ext.isGecko2, Ext.isGecko3 등이 더 추가되었다.

그외 아래 링크로 확인하시기 바랍니다.






오픈소스 라이센스에 대한 이해~!! 는 다음 파일을 참조하세요








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

extjs 2.2의 IE에서 iframe document load 버그패치  (0) 2009.01.21
Extjs 3.0 Roadmap  (10) 2008.11.12
ExtJS 2.1 릴리즈  (4) 2008.04.22
RESTFul 한 ExtJS  (0) 2008.04.16
Extjs Qtips 사용하기  (2) 2008.04.16
Post by 넥스트리소프트 데꾸벅(techbug)
, |