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恢复正常。