欢乐颂第二季_[Ext JS 4] 實(shí)戰之 ComboBox 和 DateField (消失之解決辦法)| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS 4] 實(shí)戰之 ComboBox 和 DateField (消失之解決辦法)

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

### 問(wèn)題發(fā)生的狀況
因為是在原項目的基礎上導入Ext js , 所以頁(yè)面中的form 并不是通過(guò)標準的 先創(chuàng  )建form 組件， 再add form field 的方式進(jìn)行的。
這里使用的 是純html的form 和 input, 再使用Ext js 把 input render 成 Combobox 和 DateField.
說(shuō)一下 combobox 產(chǎn)生的機制：
1. 通過(guò)Id 找到原input
2. 再找到這個(gè)input 的parent （原input 就可以刪除了）
3. 創(chuàng  )建新的Ext js Combobox 組件， render 到 原 input 的parent 中。（id 設置成原input id）
```javascript
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)生的機制類(lèi)似。

### 方案探求
使用IE Developer 查看窗口變化后， 組件的變化。
發(fā)現，組件還在。
Ext js 組成一個(gè)Comobox 主要是：
在一個(gè)div 中套一個(gè)table, table 中套一個(gè)tr, tr 中有兩個(gè)td ， 第二個(gè)td 就是主要顯示組件的。 看一些大致內容：
"presentation"class="x-form-item-body" id="XXXX-bodyEl" colspan="3" style="width: 100%;">

一開(kāi)始以為是 把原input destory掉, 導致無(wú)法render, 改換成 hide(), 或是setDisabled，或setVisable 都不行。
以上td 還是存在在頁(yè)面上， 不過(guò)位置發(fā)生了變化， 已經(jīng)不再table 下面了。
看上去是Css 導致的。在 IE Developer 中 刪除 x-form-item-body ， IE 中正常了， 欣喜。
看一下Ext js 中x-form-item-body的定義
```css
.x-form-item-body {
position: relative;
}

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

不該Ext js 本身的CSS， 在自己的頁(yè)面加入：
```css
<style>
.x-form-item-body {
position: static !important;
}
style>
```
static 是position 的默認值， 相當與沒(méi)有設置值。
一切正常了 ^^

但是有一個(gè)問(wèn)題， Chrome 和firefox 并沒(méi)有這個(gè)問(wèn)題。 保險起見(jiàn)，對原功能的改動(dòng)盡量要影響小一些。
加上條件注釋?zhuān)?

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

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS 4] 實(shí)戰之 ComboBox 和 DateField (消失之解決辦法)

網(wǎng)站導航