ComboBox 和 DateField 在IE下消失的解决方法
更新时间：2013年08月30日 15:35:02 作者：
开发过程中却遇到了在 IE 浏览器中放大、缩小窗口大小会导致这两个组件消失不见不报任何错误且在其他浏览器正常，通过本文你将学会如何解决此问题
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
前言
作为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下， 以上代码才生效。
作为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下， 以上代码才生效。
相关文章
Extjs虽然有着华丽的界面，但是真正使用过的人才知道，它运行起来的速度是让人抓狂的，而导致速度慢的重要原因，就是js的加载。2010-08-08
JavaScript的Ext JS框架中的GridPanel组件使用指南
GridPanel和TreePnal功能类似,都是Ext JS中的表格便携利器,相比之下GridPanel还要更强大并且更复杂一些,下面我们就来整理一下JavaScript的Ext JS框架中的GridPanel组件使用指南2016-05-05
extjs grid设置某列背景颜色和字体颜色的方法，需要的朋友可以参考下。2010-09-09
在切换tabpanel的时候，把相应的工具栏隐藏掉，结果出现空白，先熊板板的空白不过后来终于解决，接下来与大家分享下解决技巧，感兴趣的朋友可以参考下哈2013-04-04
这篇文章以示例的方式为大家介绍了ext前台接收action传过来的json数据,需要的朋友可以参考下2014-06-06
ExtJS中窗口是由Ext.Window类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。2011-01-01
ExtJS 中Window的窗口最大化只需将maximizable属性设置为true即可，点击最大化按钮就可以将窗体最大化，最小化的操作类似将minimizable设置为true，即可以看到窗体的最小化按钮，但是点击此按钮并不会出发任何操作，Ext没有为窗口预设最小化的任何操作，需要自己自定义最小化功能。2009-11-11
使用的是用变量存储 id 加载新的选卡时 交换 id ，从而限制了打开的选项卡数量，如果不是一定要这个效果，建议不要频繁的关闭和创建tabpanel，感兴趣的朋友可以参考下哈2013-04-04
其实这一个总是很容易解决，只要在Ext.onReady()方法之前（或者方法的第一句）加上下面这一句代码就解决了！2010-12-12
ExtJS Panel常用方法，需要的朋友可以参考下。2009-10-10
最新评论