IE_extjs で ComboBox と DateField が消える問題の解決策

はじめに

Ext JS の基本的な Form コンポーネントとして、これら 2 つは何も難しいことではありません。
しかし、開発プロセス中に、IE ブラウザーでウィンドウ サイズを拡大または縮小すると、これら 2 つのコンポーネントが消えてしまうことがわかりました。 特定の場所をクリックすると、再度表示されます。 エラーは報告されません。 他のブラウザでは正常に動作します。

問題が発生した状況

オリジナルプロジェクトをベースにExt jsをインポートしているため、ページ内のフォームが標準のフォームコンポーネントでは作成されません最初に追加し、フォームフィールドメソッドが使用されます。
ここで使用するのは純粋な HTML フォームと入力であり、Ext js を使用して入力を Combobox と DateField にレンダリングします。

コンボボックス生成のメカニズムについて説明します。

1. ID で元の入力を検索します。
2. この入力の親を検索します (元の入力は削除できます)
3. 新しい Ext js Combobox コンポーネントを作成し、その親にレンダリングします。元の入力。 (id は元の入力 ID に設定されます)

コードをコピー コードは次のとおりです:

var comboInput = Ext .get(inputId);
var comboInputParent = comboInput.destroy();
var store = Ext.create('Ext.data.Store', {
フィールド : ['abbr', 'name'],
データ : [
{"abbr":"AL", "name":"アラバマ"},
{"abbr" :"AK", "name":"アラスカ"},
{"abbr":"AZ", "name":"アリゾナ"}
//...
]
} );

Ext.create('Ext.form.ComboBox', {
id: inputId,
store: ストア,
displayField: 'name',
valueField: ' abbr',
typeAhead : true,
renderTo : comboInputParent
});

Date フィールドにも同様のメカニズムがあります。


ソリューションの探索
ウィンドウの変更後のコンポーネントの変更を表示するには、IE Developer を使用します。
コンポーネントがまだ存在していることがわかりました。

Comobox を形成するための Ext js の主な手順は次のとおりです。

テーブルを div に配置し、tr をテーブルに配置し、tr に 2 つの TDS を配置します。2 番目の TD がメインです。表示コンポーネント。 一般的な内容を見てみましょう:

コードをコピー コードは次のとおりです:

< ;td role="プレゼンテーション" 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 {
position:相対;
}

非常に単純で、たった 1 行です。この相対的な位置関係が原因であると考えられます。

Ext js 自体の CSS は使用しないでください。

コードをコピーしてください コードは次のとおりです。

🎜>


上記のコードは IE でのみ有効です。