`
gogo1217
  • 浏览: 150225 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ExtJS4使用DomHelper在表格插入多行HTML时的bug（IE浏览器下）

 
阅读更多

版权所有，转载请注明来源http://gogo1217.iteye.com，违者必究！ 

 

ExtJS4用了一段时间了，最近在做表格的单元格上点击鼠标，动态在下面插入多行数据时，发现IE下不正确。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/ext4/resources/css/ext-all.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/ext4/ext-all.js"></script>
<script type="text/javascript">
	Ext.Loader.setConfig({
		enabled : true,
		disableCaching : false
	});
	insert = function(tr) {
		Ext.DomHelper.insertAfter(tr,'<tr><td>第一行插入的数据</td></tr>'+
                  '<tr><td>第二行插入的数据</td></tr>'+
                  '<tr><td>第三行插入的数据</td></tr>');
	}
</script>
</head>
<body>
	<table border="1">
		<tr>
			<td><a onclick="insert(this.parentNode.parentNode)">点击我插入一行数据</a></td>
		</tr>
	</table>
</body>
</html>

 在IE中点击第一行数据，只会插入第二行数据，而第一行数据会被忽略，第三行以及后续的行数据均被忽略。

跟踪ExtJS的源码，可以看到最终进行DOM操作的代码为Ext.dom.HelperView中的ieTable方法。

 

ieTable: function(depth, openingTags, htmlContent, closingTags){
        detachedDiv.innerHTML = [openingTags, htmlContent, closingTags].join('');

        var i = -1,
            el = detachedDiv,
            ns;

        while (++i < depth) {
            el = el.firstChild;
        }
        // If the result is multiple siblings, then encapsulate them into one fragment.
        ns = el.nextSibling; 

        if (ns) {
            el = document.createDocumentFragment();
            while (ns) {
                el.appendChild(ns);//此处有问题，没有追加第一个元素，而是直接追加的第二个元素



                ns = ns.nextSibling;//此处有问题，追加后,ns的后续子节点关联已经断开



            }
        }
        return el;
    }

 

修改办法：

Ext.dom.Helper.prototype.ieTable = function(depth, openingTags, htmlContent, closingTags){
		   var detachedDiv=document.createElement('div');//由于闭包 ，无法访问顶部定义的变量



		   detachedDiv.innerHTML = [openingTags, htmlContent, closingTags].join('');
		    
		   var i = -1,
           el = detachedDiv,
           ns,nx;

       while (++i < depth) {
           el = el.firstChild;
       }
       // If the result is multiple siblings, then encapsulate them into one fragment.
       if (el.nextSibling) {
    	   nx=ns=el;
           el = document.createDocumentFragment();
           while (ns) {
               nx=ns.nextSibling;//保证能获取到后续元素



               el.appendChild(ns);//保证插入第一个元素



               ns=nx;
           }
       }
       return el;
   };

 

 

 

 

分享到：
| Struts2 过滤器处理静态资源的若干bug
评论
1 楼 gogo1217 2013-05-20  
4.1.2版本已经修复这个问题。
http://www.sencha.com/forum/showthread.php?232539
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics