ComboBox 和 DateField 在IE下消失的解決方法_extjs

前言

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

問題發生的狀況

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

說一下combobox 產生的機制：

說一下combobox 產生的機制：


說一下combobox 產生的機制：

說一下combobox 產生的機制： 說一下combobox 產生的機制：

說一下combobox 產生的機制：
1. 透過Id 找到原input
2. 再找到這個input 的parent （原input 就可以刪除了）
3. 建立新的Ext js Combobox 元件， render 到原input 的parent 中。 （id 設定成原input id）




複製程式碼


程式碼如下:



程式碼如下:

var comboInputParent = comboInput.parent();
comboInput.destroy();
var store = Ext.create('Ext.data.Store', {
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 }); Date Field 產生的機制類似。

方案探求

使用IE Developer 查看視窗變化後， 組件的變化。

發現，組件還在。

Ext js 組成一個Comobox 主要是：

在一個div 中套一個table, table 中套一個tr, tr 中有兩個td ， 第二個td 就是主要顯示組件的。 看一些大致內容：

複製程式碼 程式碼如下:

一開始以為是把原input destory掉, 導致無法render, 改換成hide(), 或是setDisabled，或setVisable 都不行。

以上td 還是存在在頁面上， 不過位置發生了變化， 已經不再table 下面了。

看起來是Css 導致的。在 IE Developer 中 刪除 x-form-item-body ， IE 中正常了， 欣喜。

看一下Ext js 中x-form-item-body的定義

複製程式碼 程式碼如下:

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


很簡單， 就一行. 看來就是這個相對位置導致的。

不該Ext js 本身的CSS， 在自己的頁面加入：




複製程式碼

程式碼如下: .x-form-item-body {

position: static !important;

}



static 是position 的預設值， 相當與沒有設定值。
一切正常了 ^^
但是有一個問題， Chrome 和firefox 並沒有這個問題。 保險起見，對原功能的改變盡量影響小一些。
加上條件註解：

複製程式碼 程式碼如下: 只有在IE下， 以上程式碼才會生效。