ext 3.3 tree 在IE10中的bug

ext3.3 中的tree在ie中进行兼容性测试，遇到ie10时，无法点击，其他版本的IE（7、8、9、11）均正常。

测试html如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Hello World</title>
<link href="js/ext/resources/css/ext-all.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script src="js/ext/ext-all-debug.js" type="text/javascript"></script>
<body>
<script type="text/javascript">

Ext.onReady(function(){ 
  var tree=new Ext.tree.TreePanel({ 
            el:'tree', 
            autoHeight:true 
            }); 
  var root=new Ext.tree.TreeNode({text:'区域信息'}); 
  var node1=new Ext.tree.TreeNode({text:'湖南省'}); 
  var node3=new Ext.tree.TreeNode({text:'广东省'}); 
  var node2=new Ext.tree.TreeNode({text:'广州市'}); 
  node3.appendChild(node2); 
  root.appendChild(node1); 
  root.appendChild(node3); 
  tree.setRootNode(root); 
  tree.render(); 
}); 
</script>
</head>
<body>
<div id="tree"></div>
</body>
</html>

 

 

在网上搜索得知，此bug是由于ext-all.js中的getAttributeNS方法不能兼容IE10出错引起

http://bbs.csdn.net/topics/390438841

当然，贴中的方法经测试是可以用在IE10中的，不过实在是针对性太强，解决了IE10，估计其他的又会出错。

个人估计ext肯定对这块也会做修改的，于是下载了ext3.4，果不其然，这里的getAttributeNS 被重写了：

3.3代码：

 

getAttribute : Ext.isIE ? function(name, ns){

var d = this.dom,
type = typeof d[ns + ":" + name];

if(['undefined', 'unknown'].indexOf(type) == -1){
return d[ns + ":" + name];
}
return d[name];
} : function(name, ns){
var d = this.dom;
return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name];
},

 

 

3.4代码：

getAttribute: (function(){
var test = document.createElement('table'),
isBrokenOnTable = false,
hasGetAttribute = 'getAttribute' in test,
unknownRe = /undefined|unknown/;

if (hasGetAttribute) {

try {
test.getAttribute('ext:qtip');
} catch (e) {
isBrokenOnTable = true;
}

return function(name, ns) {
var el = this.dom,
value;

if (el.getAttributeNS) {
value = el.getAttributeNS(ns, name) || null;
}

if (value == null) {
if (ns) {
if (isBrokenOnTable && el.tagName.toUpperCase() == 'TABLE') {
try {
value = el.getAttribute(ns + ':' + name);
} catch (e) {
value = '';
}
} else {
value = el.getAttribute(ns + ':' + name);
}
} else {
value = el.getAttribute(name) || el[name];
}
}
return value || '';
};
} else {
return function(name, ns) {
var el = this.om,
value,
attribute;

if (ns) {
attribute = el[ns + ':' + name];
value = unknownRe.test(typeof attribute) ? undefined : attribute;
} else {
value = el[name];
}
return value || '';
};
}
test = null;
})(),

 

将3.4中的方法写入3.3的ext-all.js中，ie10中tree恢复正常。

 

 

posted on 2014-05-28 16:02  马来亚  阅读(390)  评论(0)  编辑  收藏  举报

导航