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

 

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

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

Ext.override(Ext.menu.Menu, {
    autoWidth : function(){
        var el = this.el, ul = this.ul;
        if(!el){
            return;
        }
        var w = this.width;
        if(w){
            el.setWidth(w);
        }else if(Ext.isIE && !Ext.isIE8){
            el.setWidth(this.minWidth);
            var t = el.dom.offsetWidth; // force recalc
            el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
        }
    }
});

 

 

 

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);
        }
    }
});


 

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

 

정말 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부분이 왼편으로 숨어버리는 화면이다. 아직 버그 패치는 안된거 같구 이후 수정되면 샘플페이지에서는 이런 화면은 안나오게 될 수도....

 



날짜필드를 수정하기 위해 클릭하는 순간 아래처럼....

 이 버그는 IE뿐만 아니라 크롬,파폭에서 동일한 증상이 발견은 되었지만 IE8처럼 아예 GridBody부분이 스크롤되어 숨겨지지는 않았던 터라 기냥 두었던 건데..이런 IE8에서만 이리 되다니...
어쩔수 없이 수정을...(귀차니즘...)

GridView 코드 부분을 직접 수정해도 되겠지만 오버라이드하는 구문으로 처리했으니 기존소스페이지에 포함시키기만 하면 된다. 코드는 첨부파일로....

 

 
블로그 이미지

시반

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

카테고리

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