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 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
JS如何判断json是否为空
Jul 06 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
Vue 实现拨打电话操作
Nov 16 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
详解vue.js之props传递参数
2017/12/12 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python使用pymysql实现操作mysql
2016/09/13 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
代码实例讲解python3的编码问题
2019/07/08 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
物业公司采购员岗位职责
2013/12/31 职场文书
企业介绍信范文
2015/01/30 职场文书
我的中国梦主题班会
2015/08/14 职场文书
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers