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

来源：互联网发布：金山打字mac 编辑：程序博客网时间：2024/04/29 19:58

前言

先大致描述一下状况：

实现的功能是：

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

其他浏览器，维持原状。

0 0