前言

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

問題發(fā)生的狀況

因?yàn)槭窃谠?xiàng)目的基礎(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. 再找到這個(gè)input 的parent （原input 就可以刪除了）
3. 創(chuàng)建新的Ext js Combobox 組件， render 到 原 input 的parent 中。（id 設(shè)置成原input id）

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

方案探求

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

Ext js 組成一個(gè)Comobox 主要是：

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

一開始以為是 把原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的定義

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

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

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

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

最新評(píng)論