无为清净楼资源网 Design By www.qnjia.com
前言
作为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下, 以上代码才生效。
作为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下, 以上代码才生效。
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年09月30日
2024年09月30日
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】