欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【ComboBox 和 DateField 在IE下消失的解决方法】，下面是详细的讲解！
ComboBox 和 DateField 在IE下消失的解决方法
前言
作为Ext JS 的基本的Form 的组件， 这两个没有什么难的地方。
但是开发过程中却遇到了在 IE 浏览器中， 放大， 缩小窗口大小， 会导致 这两个组件消失不见。 点击某些地方又能显示出来。 不报任何错误。 在其他浏览器正常。
问题发生的状况
因为是在原项目的基础上导入Ext js , 所以页面中的form 并不是通过标准的 先创建form 组件， 再add form field 的方式进行的。
这里使用的 是纯html的form 和 input, 再使用Ext js 把 input render 成 Combobox 和 DateField.
说一下 combobox 产生的机制：
1. 通过Id 找到原input
2. 再找到这个input 的parent （原input 就可以删除了）
3. 创建新的Ext js Combobox 组件， render 到 原 input 的parent 中。（id 设置成原input id）
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 产生的机制类似。
方案探求
使用IE Developer 查看窗口变化后， 组件的变化。
发现，组件还在。
Ext js 组成一个Comobox 主要是：
在一个div 中套一个table, table 中套一个tr, tr 中有两个td ， 第二个td 就是主要显示组件的。 看一些大致内容：
<td role="presentation" class="x-form-item-body" id="XXXX-bodyEl" colspan="3" style="width: 100%;">
一开始以为是 把原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， 在自己的页面加入：
<style>
.x-form-item-body {
position: static !important;
}
</style>
static 是position 的默认值， 相当与没有设置值。
一切正常了 ^^
但是有一个问题， Chrome 和firefox 并没有这个问题。 保险起见，对原功能的改动尽量要影响小一些。
加上条件注释：
<!--[if IE]>
<style>
.x-form-item-body {
position: static !important;
}
</style>
<![endif]-->
只有在IE下， 以上代码才生效。
关于ComboBox 和 DateField 在IE下消失的解决方法的用户互动如下：
相关问题：我的IE 双击后闪一下就消失了 怎么回事… 要怎么解...
答：换个流览器. 楼主电脑无法上网按以下方法对应处理 IE不能上网浏览的常见原因和解决方法： 一、网络设置的问题 这种原因比较多出现在需要手动指定IP、网关、DNS服务器联网方式下，及使用代理服务器上网的。仔细检查计算机的网络设置。 二、DNS服... >>详细
相关问题：为什么这代码在ie下，div不见了？
答：这是浏览器兼容性造成的，IE9以下对CSS3属性支持很差，所以很多css3效果在IE上无法显示。而且像你前面加的-webkit，-moz前缀的，这些只在chrome,火狐之类的浏览器才能识别，ie识别的你都没加上。 -webkit-transform-style: preserve-3d; -webkit... >>详细
相关问题：ie浏览器消失是什么原因。我是经常在IE浏览器使用...
答：有时是浏览器的自身的原因,也有系统的原因,实在不行换个IE试试, >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 【ExtJs】ExtJs 表单提交登陆实现代码-表单提交-
- 【ajax清除浏览器缓存】Ajax清除浏览器js、css、
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-