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 相关文章推荐
Js获取事件对象代码
Aug 05 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
pyenv命令管理多个Python版本
2017/03/26 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
wxPython多个窗口的基本结构
2019/11/19 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Python中如何添加自定义模块
2020/06/09 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
地质灾害防治方案
2014/05/14 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
员工年终考核评语
2014/12/31 职场文书
护士个人总结范文
2015/02/13 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
Django基础CBV装饰器和中间件
2022/03/22 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers