IE_extjs에서 ComboBox 및 DateField가 사라지는 솔루션

머리말

Ext JS의 기본 Form 컴포넌트로 이 두 가지는 어렵지 않습니다.
그러나 개발 과정에서 IE 브라우저에서 창 크기를 확대 및 축소하면 이 두 구성 요소가 사라지는 현상이 발생했습니다. 특정 장소를 클릭하면 다시 표시될 수 있습니다. 오류는 보고되지 않습니다. 다른 브라우저에서는 잘 작동합니다.

문제가 발생한 상황

Ext js는 원본 프로젝트를 기반으로 Import하기 때문에 표준 Form 컴포넌트를 통해서는 페이지의 Form이 생성되지 않습니다. 먼저 추가한 다음 양식 필드 방식을 사용합니다.
여기서 사용하는 것은 순수한 HTML 형식과 입력이며, Ext js를 사용하여 Combobox 및 DateField에 입력을 렌더링합니다.

콤보박스 생성 메커니즘에 대해 이야기해 보겠습니다.

1. ID로 원본 입력 찾기
2. 이 입력의 상위 항목을 찾습니다(원래 입력은 삭제될 수 있음)
3. 새로운 Ext js Combobox 구성 요소를 생성하고 상위 항목으로 렌더링합니다. 원래 입력. (id는 원래 입력된 ID로 설정)

코드 복사 코드는 다음과 같습니다.

var 콤보Input = Ext .get(inputId);
varomboInputParent = 콤보Input.parent();
comboInput.destroy()
var store = Ext.create('Ext.data.Store', {
필드 : ['abbr', '이름'],
데이터 : [
{"abbr":"AL", "name":"Alabama"},
{"abbr" :"AK", "이름":"알래스카"},
{"abbr":"AZ", "이름":"애리조나"}
//...
]
} );

Ext.create('Ext.form.ComboBox', {
id: inputId,
store: store,
displayField: 'name',
valueField: ' abbr',
typeAhead : true,
renderTo :omboInputParent
})

Date Field에도 비슷한 메커니즘이 있습니다.

솔루션 탐색

IE Developer를 사용하여 창이 변경된 후 구성 요소의 변경 사항을 확인합니다.
구성요소가 아직 남아 있는 것을 발견했습니다.

Comobox를 형성하는 Ext js의 주요 단계는 다음과 같습니다.

div에 테이블을 넣고, 테이블에 tr을 넣고, tr에 두 번째 td를 넣습니다. 디스플레이 구성 요소. 일반적인 내용을 살펴보세요:

코드 복사 코드는 다음과 같습니다:

< ;td role="presentation " class="x-form-item-body" id="XXXX-bodyEl" colspan="3" style="width: 100%;">

처음에는 원본인 줄 알았습니다. 입력이 파괴되어 렌더링이 불가능해졌습니다. hide(), setDisabled, setVisable로 변경하면 작동하지 않습니다.

위 td는 여전히 페이지에 존재하지만 위치가 변경되어 더 이상 테이블 아래에 없습니다.

Css 때문인 것 같습니다. IE Developer에서 x-form-item-body를 삭제하면 IE에서는 정상적으로 작동합니다.

Ext js의 x-form-item-body 정의 보기

코드 복사 코드

.x-form-item-body {
위치: 상대
}

한 줄로 매우 간단합니다. 이 상대적 위치가 원인인 것 같습니다.

Ext js 자체의 CSS를 사용하면 안 됩니다.

코드 복사 코드는 다음과 같습니다.

🎜>


위 코드는 IE에서만 적용됩니다.