前言

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

問(wèn)題發(fā)生的狀況

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

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

1. 通過(guò)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ī)制類(lèi)似。

方案探求

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論