前言

作為Ext JS 的基本的Form 的組件， 這兩個沒有什么難的地方。
但是開發過程中卻遇到了在 IE 瀏覽器中， 放大， 縮小窗口大小， 會導致 這兩個組件消失不見。 點擊某些地方又能顯示出來。 不報任何錯誤。 在其他瀏覽器正常。

問題發生的狀況

因為是在原項目的基礎上導入Ext js , 所以頁面中的form 并不是通過標準的 先創建form 組件， 再add form field 的方式進行的。
這里使用的 是純html的form 和 input, 再使用Ext js 把 input render 成 Combobox 和 DateField.

說一下 combobox 產生的機制：

1. 通過Id 找到原input
2. 再找到這個input 的parent （原input 就可以刪除了）
3. 創建新的Ext js Combobox 組件， render 到 原 input 的parent 中。（id 設置成原input id）

復制代碼 代碼如下:

var comboInput = Ext.get(inputId);
var comboInputParent = comboInput.parent();
comboInput.destroy();
var store = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});

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

復制代碼 代碼如下:

<td role="presentation" colspan="3">

復制代碼 代碼如下:

.x-form-item-body {
position: relative;
}

復制代碼 代碼如下:

<style>
.x-form-item-body {
position: static !important;
}
</style>

復制代碼 代碼如下:

<!--[if IE]>
<style>
.x-form-item-body {
position: static !important;
}
</style>
<![endif]-->