[Ext JS 4] 实战之 ComboBox 和 DateField 的点击事件在IE下失效
前言
先大致描述一下状况：
实现的功能是：
1.使用Ext 的tab Panel 创建了一些 tab ,
2. 在某个子tab 下又嵌套了一个tab Panel .
3. 在某个孙子的tab 下加了一个Form， Form 里面放置了一些ComboBox 和DateField.
出现的问题是：
IE 在某些操作顺序下， ComboBox和DateField 后面的trigger 无法点击。（这个顺序基本上是, 先进入Form 这个tab 是可以的， 切换到其他tab 后， 再会在Form 的这个tab 就会出错了）
代码重现
两个文件 maintab.html 和 subtab.html . 放入web server 下看效果（因为使用到了loader）
maintab.html
<!-- Author:oscar999 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../lib/extjs/ext-all.js"></script>
<link href="../lib/extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" />
<script>
Ext.onReady(function(){
Ext.create('Ext.tab.Panel', {
renderTo: 'topTabs',
width: 600,
id: 'tabPanel',
height: 800,
margin: '100 0 0 200',
bodyPadding: 10,
border: 100,
items: [{
title: 'Approval History1',
html : 'A simple tab1',
'$tab-margin': '0 0 0 20px'
}, {
title: 'Approval History2',
id:'dynamicTab',
loader:{
url: 'subtab.html',
scripts:true,
contentType: 'html'
}
,
listeners: {
activate: function(tab) {
//TO-DO
tab.loader.load();
}
}
}, {
title: 'Approval History3',
html : 'A simple tab3'
}]
});
});
</script>
</head>
<body>
<div id="topTabs"></div>
</body>
</html>
subtab.html
<!-- Author:oscar999 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sub tab</title>
</head>
<body>
<div id="subtabs"></div>
<script>
var form = Ext.create("Ext.form.Panel", {
//frame: true,
id:'subtabform1',
width: "100%",
height: "100%",
bodyPadding: 5,
fieldDefaults: {
labelAlign: "left",
labelWidth: 180
},
items:[{
xtype:'datefield',
id:'sub1_field1',
fieldLabel:'Select Date'
},{
xtype:'combobox',
id:'sub1_field2',
fieldLabel:'Select Value'
}]
});
var form2 = Ext.create("Ext.form.Panel", {
//frame: true,
id:'subtabform2',
width: "100%",
height: "100%",
bodyPadding: 5,
fieldDefaults: {
labelAlign: "left",
labelWidth: 180
},
items:[{
xtype:'datefield',
id:'sub2_field1',
fieldLabel:'Select Date 2'
},{
xtype:'combobox',
id:'sub2_field2',
fieldLabel:'Select Value 2'
}]
});
var tabpanel = Ext.widget("tabpanel",
{
renderTo: "subtabs",
id: "subtabpanel",
activeTab: 0,
width: "100%",
plain: true,
defaults :{
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Sub Tab1',
items:[form]
},{
title: 'Sub Tab2',
items:[form2]
}]
});
</script>
</body>
</html>
解决历程
1. 从现象看， 切换tab 导致不能点击， 是否是div 层重叠导致？
使用IE Developer 改动div 的z-index ， 问题还是依旧。
2. 是否是在IE中事件丢失了。
使用以下的方法测试，Ext.getCmp("sub1_field1").onTriggerClick();
发现是可以的。 说明事件还在。
3. 最后，想到是否是有旧的缓存的影响。
想到是否在父tab active 的时候， 把子tab destroy 掉。
listeners: {
activate: function(tab) {
if(tab.getId()=="dynamicTab"&&Ext.getCmp("subtabpanel")!=null)
{
Ext.getCmp("subtabpanel").destroy();
}
tab.loader.load();
}
}
发现是可以的。 看来的确是Ext 本身的对象有维持一些缓存。
看起来，问题是解决了。 不知道这是否算Ext js 针对 IE的一个bug.
这个缓存在其他浏览器中，是否会加快页面的速度。
所以综合一下， 解决方案是：
针对IE ， 增加对子tab 的destroy 的操作。
其他浏览器，维持原状。