当前位置: 代码迷 >> JavaScript >> [Ext JS 4] 实战之 ComboBox 和 DateField (消失之解决方法)
  详细解决方案

[Ext JS 4] 实战之 ComboBox 和 DateField (消失之解决方法)

热度:697   发布时间:2013-09-05 16:02:06.0
[Ext JS 4] 实战之 ComboBox 和 DateField (消失之解决办法)

前言

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



  相关解决方案