zoukankan      html  css  js  c++  java
  • 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恢复正常。

  • 相关阅读:
    MySQL数据库之WHERE条件语句
    MySQL数据库的简单操作指令之DML语言
    课程设计必备之数据库操作代码模板
    MySQL数据库之外键约束的简单理解
    pdf.js的使用
    javascript连连看
    数据库问题
    列表文字超出后,鼠标悬浮显示全部内容
    springboot component注入servecie
    点击列表 获取table tr td 下的input value
  • 原文地址:https://www.cnblogs.com/malaya/p/3757252.html
Copyright © 2011-2022 走看看