[ExtJS4]实战之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

<script type="text/javascript" src="../lib/extjs/ext-all.js">《script》《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》  

《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》

解决历程

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 的操作。

其他浏览器，维持原状。