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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
定义select的边框颜色
Apr 28 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
JS实现一个简单的日历
Feb 22 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
js实现拖拽元素选择和删除
Aug 25 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中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
Redis构建分布式锁
2017/03/28 PHP
Opacity.js
2007/01/22 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
为python设置socket代理的方法
2015/01/14 Python
python中map、any、all函数用法分析
2015/04/21 Python
python将字符串转换成数组的方法
2015/04/29 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python issubclass 和 isinstance函数
2019/07/25 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
心理健康教育心得体会
2013/12/29 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
图书室管理制度
2014/01/19 职场文书
初中语文教学反思
2014/02/02 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
创先争优演讲稿
2014/09/15 职场文书
政协会议宣传标语
2014/10/09 职场文书
闪闪的红星观后感
2015/06/08 职场文书
python实现A*寻路算法
2021/06/13 Python
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android