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 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 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 快速生成 Flash 动画的方法
2007/03/06 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
基于python实现从尾到头打印链表
2019/11/02 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
美国牛仔品牌:True Religion
2018/11/16 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
客服文员岗位职责
2013/11/29 职场文书
思想专业自荐信范文
2013/12/25 职场文书
领导干部考核评语
2015/01/04 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
公司表扬信格式
2015/05/04 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书