IE下ComboBox与DateField消失的解决方案

前言

ComboBox和DateField作为Ext JS表单中的基础组件，本身并不复杂。然而在实际开发中，我们遇到了一个棘手的问题：在IE浏览器里，只要缩放窗口，这两个组件就会直接消失。点击页面其他区域后，它们有时又偶尔出现，且没有任何错误提示。其他浏览器（Chrome、Firefox）均运行正常。这究竟是什么原因导致的？下面将详细分析并给出解决方案。

问题发生的状况

事情是这样的：项目原本是纯HTML表单，后来引入了Ext JS，但并未按照标准方式（先创建Form组件，再通过add field添加字段）进行重构。而是直接在原有的HTML input上，通过Ext JS的render方法将input转换为ComboBox和DateField。正是这种“半路出家”的非标准渲染方式，埋下了隐藏的隐患。

看一下ComboBox的生成机制

先看看ComboBox是如何被“创建”出来的：

1. 根据id找到原始input元素；
2. 找到该input的父节点（随后原始input可以被移除）；
3. 创建新的Ext JS ComboBox组件，渲染到父节点中，并复用原始input的id。

DateField的生成机制与之类似。核心代码如下：

复制代码 代码如下:

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
});

方案探求

首先使用IE Developer工具观察窗口缩放后的组件状态。发现组件实际上仍然存在于DOM树中，只是显示异常。Ext JS的ComboBox内部结构大致如下：一个div内嵌套一个table，table中包含一行tr，tr又包含两个td，第二个td负责显示组件内容。具体结构示例：

复制代码 代码如下:

最初怀疑是销毁原始input导致无法正常渲染，于是尝试使用hide()、setDisabled、setVisible等方法替换，但均无效。再次观察发现，虽然td仍然挂在页面上，但其位置已经偏移——不再位于table下方。这很可能是CSS样式的问题。

抱着尝试的心态，在IE Developer中直接删除该td上的class x-form-item-body，组件瞬间恢复正常！看来问题就出在这个class上。查阅Ext JS中x-form-item-body的CSS定义：

复制代码 代码如下:

.x-form-item-body {
position: relative;
}

定义非常简单，只有一行——position: relative;。没错，正是这个相对定位属性导致了IE中的渲染异常。

为了不直接修改Ext JS本身样式文件（以免后续升级时被覆盖），我们在自己的页面中添加覆盖样式：

复制代码 代码如下:

static是position的默认值，相当于不设置定位。测试后问题完美解决。不过Chrome和Firefox并未出现此问题，为了将改动的影响降到最低，我们采用条件注释，仅对IE浏览器生效：

复制代码 代码如下:

只有在IE浏览器下，这段代码才会被解析并生效。至此，该问题被彻底解决。