[Ext JS 4] 实战之 ComboBox 和 DateField 的点击事件在IE下失效| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] 实战之 ComboBox 和 DateField 的点击事件在IE下失效

## [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
```html
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<scripttype="text/javascript"src="../lib/extjs/ext-all.js">script>
<linkhref="../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>
<divid="topTabs">div>
body>
html>

subtab.html
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>sub tabtitle>
head>
<body>
<divid="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 的操作。
其他浏览器，维持原状。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] 实战之 ComboBox 和 DateField 的点击事件在IE下失效

网站导航