欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2013年08月30日 15:35:02   作者：  
開發(fā)過程中卻遇到了在 IE 瀏覽器中放大、縮小窗口大小會導(dǎo)致這兩個組件消失不見不報任何錯誤且在其他瀏覽器正常，通過本文你將學(xué)會如何解決此問題
前言

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

問題發(fā)生的狀況

因為是在原項目的基礎(chǔ)上導(dǎo)入Ext js , 所以頁面中的form 并不是通過標(biāo)準(zhǔn)的 先創(chuàng)建form 組件， 再add form field 的方式進(jìn)行的。
這里使用的 是純html的form 和 input, 再使用Ext js 把 input render 成 Combobox 和 DateField.

說一下 combobox 產(chǎn)生的機(jī)制：

1. 通過Id 找到原input
2. 再找到這個input 的parent （原input 就可以刪除了）
3. 創(chuàng)建新的Ext js Combobox 組件， render 到 原 input 的parent 中。（id 設(shè)置成原input id）
復(fù)制代碼 代碼如下:

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

Date Field 產(chǎn)生的機(jī)制類似。

方案探求

使用IE Developer 查看窗口變化后， 組件的變化。
發(fā)現(xiàn)，組件還在。

Ext js 組成一個Comobox 主要是：

在一個div 中套一個table, table 中套一個tr, tr 中有兩個td ， 第二個td 就是主要顯示組件的。 看一些大致內(nèi)容：
復(fù)制代碼 代碼如下:

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

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

以上td 還是存在在頁面上， 不過位置發(fā)生了變化， 已經(jīng)不再table 下面了。

看上去是Css 導(dǎo)致的。在 IE Developer 中 刪除 x-form-item-body ， IE 中正常了， 欣喜。

看一下Ext js 中x-form-item-body的定義
復(fù)制代碼 代碼如下:

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

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

不該Ext js 本身的CSS， 在自己的頁面加入：
復(fù)制代碼 代碼如下:

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

static 是position 的默認(rèn)值， 相當(dāng)與沒有設(shè)置值。
一切正常了 ^^
但是有一個問題， Chrome 和firefox 并沒有這個問題。 保險起見，對原功能的改動盡量要影響小一些。
加上條件注釋：
復(fù)制代碼 代碼如下:

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

只有在IE下， 以上代碼才生效。

相關(guān)文章

最新評論