我们的应用程序使用 ExtJs,并且在 4.1.3 版本中,IE 中出现了奇怪的行为。
问题是,如果我们打开一个具有很少文本字段/组合的窗体的窗口,并且如果我们在关闭一次后重新打开该窗口,则应用于文本字段/组合的焦点/模糊侦听器将停止工作。
以下是该问题的测试用例:
Ext.onReady(function(){
function getForm(){
var form = {
xtype:'form',
width:550,
items:[
{
xtype:'textfield',
flex:1,
fieldLabel:'test1',
id:'disabledFieldId',
itemId:'disabledFieldId',
listeners:{
focus:function(){
console.log('focus first field');
},
blur:function(){
console.log('blur first field');
},
change:function(){
console.log('change first field');
}
}
},
{
xtype:'textfield',
flex:1,
fieldLabel:'test2'
}
]
};
return form;
}
Ext.create('Ext.Button', {
text: 'Open Window',
renderTo: Ext.getBody(),
handler: function() {
var win = Ext.create('Ext.window.Window',{
modal:true,
items:[
getForm()
],
width:550,
height:200
});
win.show();
}
});
});
在上面的测试用例中,可以通过以下步骤来检查这个问题:
在 IE 中加载页面并单击“打开窗口”按钮打开窗口
单击第一个文本字段以将其聚焦,这将在控制台中打印一个语句-“聚焦第一个字段”
现在关闭此窗口,然后从按钮再次打开它
单击第一个文本字段 - 现在,控制台不会打印任何内容 - 焦点事件根本不会触发。
我检查并发现'focus'和'blur'事件没有触发,但'change'事件每次都会触发。
如果我们重新加载整个页面然后现在打开窗口,那么事件将再次开始触发。但在这种情况下,也只是一次。
我发现如果从文本字段中注释了“id”,那么事情就会开始正常工作。但这很奇怪。'id' 如何与听众发生冲突?这是一个错误吗?
请注意,不会引发任何错误。此外,窗口正在被破坏,元素正在被重新创建。
我也在 Chrome 和 Firefox 中对此进行了测试,发现这种行为仅在 IE 中发生(在 IE9 中检查,文档和浏览器模式设置为标准)。
此外,当我使用 4.1.1 之前的版本进行测试时,我发现 IE 也可以正常工作。
对此有任何想法吗?
提前感谢您的帮助。