ComboBox 和 DateField 在IE下消失的解决方法
2013-08-30 00:00
381 查看
前言
作为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)
Date Field 产生的机制类似。
方案探求
使用IE Developer 查看窗口变化后, 组件的变化。
发现,组件还在。
Ext js 组成一个Comobox 主要是:
在一个div 中套一个table, table 中套一个tr, tr 中有两个td , 第二个td 就是主要显示组件的。 看一些大致内容:
一开始以为是 把原input destory掉, 导致无法render, 改换成 hide(), 或是setDisabled,或setVisable 都不行。
以上td 还是存在在页面上, 不过位置发生了变化, 已经不再table 下面了。
看上去是Css 导致的。在 IE Developer 中 删除 x-form-item-body , IE 中正常了, 欣喜。
看一下Ext js 中x-form-item-body的定义
很简单, 就一行. 看来就是这个相对位置导致的。
不该Ext js 本身的CSS, 在自己的页面加入:
static 是position 的默认值, 相当与没有设置值。
一切正常了 ^^
但是有一个问题, Chrome 和firefox 并没有这个问题。 保险起见,对原功能的改动尽量要影响小一些。
加上条件注释:
只有在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下消失的解决方法
- windows桌面的“我的电脑”“IE”等消失的解决方法
- IE绝对定位元素神秘消失或被遮挡的解决方法
- 在IE下拖动滚动条时border消失的解决方法
- winxp系统中ie桌面图标消失的解决方法(winxp显示桌面图标)
- IE 窗口的菜单栏及工具栏消失的解决方法
- IE绝对定位元素神秘消失或被遮挡的解决方法
- IE图标消失 HTML文件图标变为未知图标的解决方法
- IE图标消失 HTML文件图标变为未知图标的解决方法
- IE图标消失 HTML文件图标变为未知图标的解决方法
- [Ext JS 4] 实战之 ComboBox 和 DateField (消失之解决办法)
- IE绝对定位元素始终被遮挡或者消失的解决方法
- [Ext JS 4] 实战之 ComboBox 和 DateField (消失之解决办法)
- 解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法
- Jquery $.getJSON 在IE下的缓存问题解决方法
- jsp中上传大文件(200M已测试),存到数据库,易发生连接超时的ie找不到网页的错误,其解决方法。略写代码,参考(.net修改代码应该可以,改天修改)
- Boot Camp分区时强制终止导致硬盘空间消失的解决方法
- 关闭ie窗口清除Session的解决方法
- Ubuntu下ibus输入法的图标消失解决方法