행복만땅 개발자

ExtJS 2.2x를 쓰는 경우 IE6에서 그리드 상단 메뉴의 아이콘이 아래의 그림처럼

제대로 표시되지 않는 버그가 남아 있슴을 이제사 알게 되었다.

솔직히 이 버그는 예전에 발견된 버그일뿐 아니라 2.2.1 버젼에서는 fix된 것으로 알고 있었던 터라..

IE7 이후 버젼에만 맞추고 테스트를 진행했었는데..혹여나..

다시 최신버젼을 받아봐도 IE6에서 위에 해당하는 버그가 발생하는 것을 확인할 수 있었다.

예전엔 IE7 이후버젼에 이런 증상이 있었는데 지금은 거꾸로 IE6에서 발생하다니..

해결 방법은 이전버젼에서 적용했던 버그 fix를 그대로 적용하면 된다.

이젠 IE6 버젼에서 정상적으로 돌아가는 것을 확인할 수 있을 것이다.

물론 IE7과  IE8, 파폭, 크롬에서도 정상작동 확인...

ExtJS에서 DateField를 사용할 때 IE8에서는 달력이 짤려나오는 문제가 있다.

그림처럼 달력이 토막나 보인다.

해결방법은 Ext.menu.Menu 클래스의 autoWidth 메소드를 수정하면 된다.

정말 IE8 은 골치 아픈 브라우저가 아닌가 싶다. 유독 혼자만 튀고 싶은 MS의 성격을 그대로 가지고 있는 듯 하다.

분명 브라우징 속도는 빨라진 듯 같다(하지만 MS에서 말하는 것처럼 다른 브라우저보다 빠르다는 느낌은...-_-a)

웹표준을 지향한다던 IE8, 하지만  호환성 테스트 중 최하위..더군다나 이전 버젼의 IE 나 타 사의 브라우저에는 정상적으로

작동하는데 유독 IE8에서만 동작이 안되는 페이지들도 있다. IE8만의 웹표준은 아닐까?

여하튼 ExtJS를 통해 개발하면서 발견한 또하나의 버그?

위 그림처럼 텍스트상자의 상단 부분의 외곽선이 보이지 않는다.

확인해 보니 2.x 버젼의 ExtJS를 사용한 경우 IE8에서만 발생하는 문제였다.

해결 방법은  

.ext-ie8 .x-form-text{
    margin: 0px 0px;
}

.ext-ie8 .x-form-trigger{
    top: 1px;
}

2.2.1 이상의 버젼의 ExtJS로 구현된 경우 IE8에서 그리드의 편집을 위해 셀을 클릭할때마다 왼쪽으로 GridBody가 스크롤되어  숨어버리는 버그가 있다. 솔직히 이 버그는 예전에 ExtJS를 2.2.1 으로 마이그레이션을 할 때 발견했던 부분이었는데 IE8에서와는 달리 Editable Grid에서 셀을 클릭할때 GridView.focusCell에서 버그가 발생하여 패널에  ScrollBar가 생기곤 했다.

생기곤 했다라는 말대로 항상 발생한 것은 아니고 그리드가  두개의 컬럼만 가지고 있는 경우나 GridBody의 width가 GridPanel의 width보다 작은 경우에는 발생하지 않았다.

다음은 IE8을 사용할 경우 앞서 말한 버그를 보여준다. Extjs의 샘플페이지 중 Editable Grid 페이지에서 셀을 클릭한 경우 스크롤이 생기면서 GridBody부분이 왼편으로 숨어버리는 화면이다. 아직 버그 패치는 안된거 같구 이후 수정되면 샘플페이지에서는 이런 화면은 안나오게 될 수도....

 ExtJs 2.0에서는 괜찮았는데 2.1~2.2를 사용하는 경우

위의 그림처럼 체크박스를 사용할 때 boxLabel 부분이 정상적으로 표시되지 않은 경우가 있다.

(아니면 뒤쪽으로 몰린다던지..)

Ext.form.Checkbox 에 정의되어있는 getResizeEl에 다음과 같이 정의되어 있다.

이부분을 다음과 같이 수정한다.

ExtJS의 샘플예제를 보면 몇몇 DD(DragDrop) 샘플예제들을 볼 수 있다.

먼저 그리드에서 Drag&Drop을 사용하기 위해서는 

drag할 그리드에서  enableDragDrop옵션을 true로 해주고

ddGroup을 정의한후 (아래샘플의 경우 'GridDD')  다음과 같이 DropTarget 인스턴스를 생성해주면 된다.

var drop = new Ext.dd.DropTarget(Drop될 컨테이너 Element, {
      //옵션..

      ddGroup : 'GridDD', // 그리드 설정옵션의 ddGroup의 값과 동일.
      notifyDrop : function(dd, e, data){
            // to do

      }        
});

그리드끼리나 폼 등에서는 위와 같이 하면 작동이 되는걸 확인할 수 있는데

그리드에서 트리로 Drag&Drop을 하고자 하는 경우에는 DropTarget을 어떻게 설정을 해야 할까?

(한마디로 위와같은 방법으로는 핸들링되지 않는다.)

사실 tree에서는 DD가 이미 built-in 되어 있기 때문에 별도의  DropTarget 인스턴스를 생성시킬 필요가 없을 뿐더러

위와 같은 방법으로는 핸들링되지 않는다.

단지 tree 설정옵션인 enableDrop을 true로 바꿔주고

dropConfig만 만들어 주면 된다.설정옵션은 동일..

예를 들어보면 tree 설정옵션에 다음과 같이 추가하면 된다.

  enableDrop:true,
  dropConfig:{
         ddGroup : 'GridDD'
         ,onNodeDrop : function(n,dd, e, data){
               var selectedRecord = dd.dragData.selections[0]; //drag된 record
              .... 
       } 
},

폼패널에서는 Config 옵션에에 keys 라는 옵션이 있다.

이것은 폼패널내에서 키이벤트를 핸들링 하는 옵션이다.

많이 사용하는 예는 엔터키를 쳤을 때 OK 버튼 클릭 이벤트가 수행되도록 하는 것이며

그 예는 다음과 같다.

TextField만를 사용할 때는  키이벤트를 어떻게 할까?

TextField에는 keydown, keypress, keyup 이라는 세가지 키이벤트를 정의하고 있음에도 불구하고

다음과 같이 리스너로 등록해봐도 작동이 되지 않는다.

listeners:{
   keydown:function(t,e){
      if(e.keyCode == 13){
        //to do
      }
  }}

font:normal 11px tahoma

font:normal 12px tahoma

자세히 보면 탭 아래 공간이 비어 있는것을 볼 수 있다. 탭을 선택 하더라도 깨져서 표현이 된다.
반면에 IE 를 제외한 ExtJS 호환 브라우져 에서는 굴림체를 11px로 표시함으로서 위와 같은 문제가 발생하지 않는다.

해결방법은??
11px 이 사용되는 부분의 폰트를 아래와 같이 굴림으로 명확히 지정해 주면 된다.

font:normal 11px gulim

또는 아래의 코드로 IE 의 탭 관련 css 를 재정의 한다.

.ext-ie .x-tab-strip span.x-tab-strip-text {    font: 11px Gulim, Tahoma;}

흐음 아직은 국내에서 ExtJS를 쓰는 곳은 많이 없는지 덕분에 머 하나 막히면 ExtJS 포럼을 열씸 뒤지는 중이다.

그래도 예전에 비해 ExtJS에 관련된 블로그들이 많이 눈에 띄는 것을 보면 언젠가 ExtJS의 한글서적도 나오지 않을까?

dojo 관련한 책도 영문서적만 있는 걸 보면 큰 기대는 못하고 있지만...-_-

mvc 프레임워크로 스트럿츠2를 사용하기 때문에 요즈음 dojo와  extjs, jQuery 통합을 시도해보고는 있는데

기냥 하나만 쓸까? 고민..

여하튼 ExtJS 사용자들을 위한 팁하나 소개할까 한다.

ExtJS로 툴바 또는 버튼을 만들면 a 태그를 사용할 때 처럼 onFocus 상태에서 점선박스가 생기게 된다.

매번 해당 컴포넌트를 만들면서 onFocus ='this.blur()' 를 해주기는 어려운 노릇..

ext-all.js 파일을 열어보자

<em unselectable=\"on\"><button class=\"x-btn-text\" type=\"{1}\" >{0}</button></em>

라는 구문을 찾아서 다음과 같이 수정한다.

<em unselectable=\"on\"><button class=\"x-btn-text\" type=\"{1}\" onfocus=\"this.blur()\">{0}</button></em>

 이젠 별다른 조치없이도 점선박스는 사라진다. ㅋㅋ

PS. 찾아보면 두군데 수정을 하게 된다.

혹여나 이글을  보고 수정했는데 여전히 점선이 나온다는 사람이 있을지 몰라서 언급..*^^*