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

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

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

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

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

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

 

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

 

.ext-ie .x-menu-item-icon {left: -24px;}

.ext-strict .x-menu-item-icon {left: 3px;}

.ext-ie6 .x-menu-item-icon {left: -24px;}

 을  css에 추가하면 된다.

 

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

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

 

 

ExtJS에서 유용하게 사용하는 플러그인중 하나가 그리드에서 검색기능을 지원하는 searchField가 아닐까 싶다.

헌데 IE8에서는 아래 화면에서 처럼 정상적으로 표현되지 않는다.(동작은 한다..)

 

아니면 다음그림처럼 검색필드 부분이 아예 나오지 않는 경우도 있다.

 

알아보니 searchField가 문제가 아니라

클래스 내의 멤버변수로 사용하고 있던 TriggerField에서 문제가 있었다.

 

문제가 있는 코드의 위치는 아래....

 

Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {
...
afterRender : function(){
    Ext.form.TriggerField.superclass.afterRender.call(this);
    var y;
    if(Ext.isIE && !this.hideTrigger && this.el.getY() != (y = this.trigger.getY())){

    // 위 라인에서 문제가 발생한다....
        this.el.position();
        this.el.setY(y);
    }
},


그럼 이제 수정을..이번에도 직접 코드를 수정하기 보다는 override해서 처리를...

Ext.override(Ext.form.TriggerField, {


 afterRender : function(){
        Ext.form.TriggerField.superclass.afterRender.call(this);
        var y;
        if (Ext.isIE && !this.hideTrigger && this.el.getY() !=

              (y = (!this.triggers?this.trigger.getY():this.triggers[1].getY()))) {
            this.el.position();
            this.el.setY(y);
        }
    }
});


 

 이제 아래처럼 정상적으로...ㅋㅋ

 

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

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

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

 

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

 getResizeEl : function(){
        if(!this.resizeEl){
            this.resizeEl = Ext.isSafari ? this.wrap : (this.wrap.up('.x-form-element', 5) || this.wrap);
        }
        return this.resizeEl;
  }

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

getResizeEl : function(){
        return this.wrap;
},

아니면 호출하는 스크립트에서

Ext.override(Ext.form.Checkbox, {
        getResizeEl : function(){
                return this.wrap;
        }
});

 이렇게 Override 해서 사용하면 정상적으로 표시됨을 확인할 수 있다.

 

 
블로그 이미지

시반

시반(詩伴)이란 함께 시를 짓는 벗이란 뜻을 가지고 있습니다. 함께 나눌수 있는 그런 공간이길 바라며...

카테고리

분류 전체보기 (233)
개발 이야기 (73)
WEB2.0 (57)
DB2 (24)
MySQL (6)
오라클 (26)
기타 (44)
취미 (0)
잡담 (2)