ComboBox 和 DateField 在IE下消失的解决方法_extjs
程序员文章站
2022-04-09 17:44:54
...
前言
作为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 就是主要显示组件的。 看一些大致内容：
一开始以为是 把原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， 在自己的页面加入：
static 是position 的默认值， 相当与没有设置值。
一切正常了 ^^
但是有一个问题， Chrome 和firefox 并没有这个问题。 保险起见，对原功能的改动尽量要影响小一些。
加上条件注释：
只有在IE下， 以上代码才生效。
作为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 就是主要显示组件的。 看一些大致内容：
复制代码 代码如下:
一开始以为是 把原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， 在自己的页面加入：
复制代码 代码如下:
static 是position 的默认值， 相当与没有设置值。
一切正常了 ^^
但是有一个问题， Chrome 和firefox 并没有这个问题。 保险起见，对原功能的改动尽量要影响小一些。
加上条件注释：
复制代码 代码如下:
只有在IE下， 以上代码才生效。
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
- javascript怎么将值类型强制转为字符串
- javascript中什么是位运算符
- javascript怎么判断字符串是否是数字
- 总结分享： 6 种JavaScript的打断点的方...
- ComboBox 和 DateField 在IE下...
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
作者信息
- 最新文章
- 热门排行
推荐阅读
-
ul在Firefox和IE下的不同表现的解决方法
-
textarea 在IE和FF下换行无法正常显示的解决方法
-
Ext JS Grid在IE6 下宽度的问题解决方法_extjs
-
textarea 在IE和FF下换行无法正常显示的解决方法
-
关于onchange事件在IE和FF下的表现及解决方法_javascript技巧
-
关于onchange事件在IE和FF下的表现及解决方法_javascript技巧
-
在IE下拖动滚动条时border消失的解决方法_经验交流
-
在IE下拖动滚动条时border消失的解决方法_经验交流
-
ComboBox 和 DateField 在IE下消失的解决方法_extjs
-
ul在Firefox和IE下的不同表现的解决方法_经验交流
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论