前言
作为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下， 以上代码才生效。