• ExtJs实践(2)——ExtJs在IE下存在的一个bug


    今天在使用ExtJs的时候,发现在IE下存在一个问题,不知道是不是Extjs本身的Bug。如果在一个页面上输出一串文字(非节点),例如:

    <body>
    Hello, Leepy!
    <span>其他的…</span>
    </body>

    会弹出一个提示“对象不支持此属性或方法”的对话框。利用IE调试工具发现,错误的地方落在:

    image

    于是调试跟踪了下变量:

    image

    发现nodeType为3,根据Javascript规范:

    nodeType

    nodeType 属性可返回节点的类型。

    最重要的节点类型是:
    元素类型                  节点类型
    元素element                1
    属性attr                      2
    文本text                     3
    注释comments            8
    文档document             9

    说明会产生一个文本的元素。但是如果是文本的元素,因此el.ownerDocument.createRange(),就会弹出对象不支持此属性或方法。而这里必须保证它的元素nodeType必须为1。

    那么怎么解决这个问题呢?最简单的办法应该就是把文本包在一个节点上,如<span></span>里头,或者把全部的Body下嵌套一个span,如

    <body>
    <span>
    Hello, Leepy!
    <span>其他的…</span>
    </span>
    </body>

    这样就能够顺利通过调试

    image

    我这里介绍一个方法就是在ext.all.debug.js里头修改相关的代码(如果是Bug的话,还是能够在extjs库中进行修正吧)

    代码
    insertHtml: function (where, el, html) { 
        
    var hash = {}, 
            hashVal, 
            setStart, 
            range, 
            frag, 
            rangeEl, 
            rs;
     
       if (el.nodeType == 3) { 
            
    var span = document.createElement('span');  
            //parentSpan = el.parentNode.insertBefore(span); 
            parentSpan = el.parentNode.insertBefore(span, el); //firefox的insertBefore需要具有第二个参数,否则会报错
            parentSpan.appendChild(el); 
            el = parentSpan; 
        }
        
    where = where.toLowerCase();
        hash[beforebegin] 
    = ['BeforeBegin''previousSibling']; 
        hash[afterend] 
    = ['AfterEnd''nextSibling'];
        
    if (el.insertAdjacentHTML) { 
            
    if (tableRe.test(el.tagName) && (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))) { 
                
    return rs; 
            }
            hash[afterbegin] 
    = ['AfterBegin''firstChild']; 
            hash[beforeend] 
    = ['BeforeEnd''lastChild']; 
            
    if ((hashVal = hash[where])) { 
                el.insertAdjacentHTML(hashVal[
    0], html); 
                
    return el[hashVal[1]]; 
            } 
        } 
    else { 
            range 
    = el.ownerDocument.createRange(); 
            setStart 
    = 'setStart' + (endRe.test(where) ? 'After' : 'Before');
     
       …
    }

    这里红色字体的意思是,首先创建一个span元素,然后将el的父节点下插入这个元素,然后在把el放入parentSpan中,最后给el重新赋值。这样就完成了文本元素的包装。

    最后再看下结果,调试通过了。

    这里是我在使用Extjs遇到的一个问题,给碰到该问题的朋友指明一个方向:)

  • 相关阅读:
    OpenCV学习(7)--
    OpenCV学习(6)--更多形态转化、Hit-or-Miss变换、Hit-or-Miss变换、图像金字塔
    Linux基本操作
    设计模式
    利用Python进行数据分析:【Matplotlib】
    利用Python进行数据分析:【Pandas】(Series+DataFrame)
    利用Python进行数据分析:【NumPy】
    利用Python进行数据分析:【IPython】
    数据结构与算法(C/C++版)【排序】
    《操作系统》学习笔记
  • 原文地址:https://www.cnblogs.com/liping13599168/p/1927765.html
Copyright © 2020-2023  润新知