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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
js实现网页随机验证码
Oct 19 Javascript
JavaScript 中的六种循环方法
Jan 06 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根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Djang中静态文件配置方法
2015/07/30 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python 读取、写入txt文件的示例
2020/09/27 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
数控技术专业毕业自荐书范文
2014/02/05 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书