ComboBox 和 DateField 在IE下消失的操作_extjs

web前端|js教程 ComboBox 和 DateField 在IE下消失的操作_extjs

ComboBox,DateField

web前端-js教程

前言

移动端问卷调查源码,脱机安装vscode,ubuntu 21.1,显示tomcat运行,sqlite c 读写,免费一年云服务器,百分百轮播图插件,bmp前端js框架,爬虫后裔,PHP协频,广州网站seo服务公司,网站树形菜单样式,网页随机数代码,h5动态页面模板,ie6 登录页面html模板,免费企业基本信息管理系统,邮箱验证程序lzw

作为Ext JS 的基本的Form 的组件，这两个没有什么难的地方。
但是开发过程中却遇到了在 IE 浏览器中，放大，缩小窗口大小，会导致这两个组件消失不见。点击某些地方又能显示出来。不报任何错误。在其他浏览器正常。

在线请假系统asp源码,ubuntu使用lvm,tomcat打开后是乱码,爬虫不靠谱,php登陆注册源码,白云移动端seo关键词优化lzw

问题发生的状况

无忧统计源码,c语言 ubuntu安装,tomcat给项目变名称,java爬虫窗口,学校网站模板php,网址中有产品名利于seo吗lzw

因为是在原项目的基础上导入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，在自己的页面加入：

 
.x-form-item-body { 
position: static !important; 
}

static 是position 的默认值，相当与没有设置值。
一切正常了 ^^
但是有一个问题， Chrome 和firefox 并没有这个问题。保险起见，对原功能的改动尽量要影响小一些。
加上条件注释：

只有在IE下，以上代码才生效。

combobox DateField