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

  • 相关阅读:
    Go内建容器篇
    Go基础语法篇
    【区块链】比特币Merkle树
    【区块链】Fabric 术语
    Apache旗下项目
    【区块链】Fabric0.6 与1.0
    rc.local不起作用
    命令行模式启动VMWare虚拟机
    vsftpd 530 Login incorrect 根本原因和解决方案
    Oracle的undotbs01.dbf文件太大(占用大量磁盘空间)处理方法 ORA-01654 空间不足 ORA-01653
  • 原文地址:https://www.cnblogs.com/malaya/p/3757252.html
Copyright © 2020-2023  润新知