ComboBox 和 DateField 在IE下消失的解决方法


Posted in Javascript onAugust 30, 2013

前言

作为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下, 以上代码才生效。
Javascript 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
JavaScript中string对象
Jun 12 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
Vue异步组件使用详解
Apr 08 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
图片Slider 带左右按钮的js示例
Aug 30 #Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 #Javascript
Jquery读取URL参数小例子
Aug 30 #Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 #Javascript
细说javascript函数从函数的构成开始
Aug 29 #Javascript
密码框显示提示文字jquery示例
Aug 29 #Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 #Javascript
You might like
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php防盗链的常用方法小结
2010/07/02 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
全面了解js中的script标签
2016/07/04 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
详解Vue之事件处理
2020/07/10 Javascript
Python切换pip安装源的方法详解
2016/11/18 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
安全生产专项整治方案
2014/05/06 职场文书
大型演出策划方案
2014/05/28 职场文书
消防志愿者活动方案
2014/08/23 职场文书
体育运动会广播稿
2014/10/05 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
佛光寺导游词
2015/02/10 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Python基础之pandas数据合并
2021/04/27 Python
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js