版权所有，转载请注明来源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;
};
相关推荐
在ExtJS中实现多行合并（rowspan）的效果，通常是为了在数据表格中展示具有层次结构的数据，或者在某些特定情况下需要对表格行进行合并，以优化数据的展示。这通常涉及到对表格（GridPanel）的配置和自定义。下面...
在实际应用中，我们可以通过以下步骤来使用EXTJS 4的树形表格组件： 1. **创建Store**：定义一个Store对象，配置数据源和模型，用于存储和管理数据。 2. **定义Model**：定义树形表格的数据模型，包括字段名和...
默认情况下，ExtJS会自动在每个分组底部显示小计。如果你想要自定义小计的样式或行为，可以使用`summaryRenderer`函数。例如，你可以将小计格式化为货币值： ```javascript { text: '销售额', dataIndex: '...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹，其余文件过大并且与主题无关,因此未包含。具体方法，请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
在 ExtJS3 中，我们可以使用 Ext.extend 来定义类，而在 ExtJS4 中，我们需要使用 Ext.define 来定义类。例如，在 ExtJS3 中，我们可以使用以下代码来定义一个类： ```javascript Ext.ux.PostStore = Ext.extend...
2. **按钮（Button）的用法**：`EXTjs button用法.doc`将详细介绍如何创建和使用ExtJS 4的按钮组件，包括设置按钮文本、图标、事件监听器以及使用不同类型的按钮，如工具栏按钮、菜单按钮等。 3. **表单（Form）...
在本文中，我们将深入探讨如何在ExtJS框架中实现表格单元格的合并，以及解决不同浏览器间盒模型差异带来的布局问题。ExtJS是一款强大的JavaScript库，用于构建富客户端应用程序，其表格组件是功能丰富的数据展示工具...
在EXTjs 4.0以下的版本中，开发人员可能会遇到合并表格单元格的需求，这在展示复杂数据或者组织信息时非常有用。EXTjs提供了强大的表格网格组件（GridPanel），允许自定义布局和样式，包括单元格的合并。 在EXTjs中...
在给定的"Extjs4 grid使用例子"中，我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分，它提供了一个灵活的、可定制的数据展示网格，通常用于显示和操作大量数据。 1. **...
在本文中，我们将深入探讨如何使用ExtJS来模拟Excel表格，以及实现Excel的各种功能。 首先，ExtJS中的GridPanel组件是实现模拟Excel表格的核心。GridPanel允许我们展示大量数据，并提供了诸如排序、过滤、分页等...
在ExtJS4中，多选下拉树（Multi Select Tree）是一种用户界面组件，它结合了下拉菜单和树形结构，允许用户从层级结构中选择多个项目。这个组件在数据管理、分类选择等场景中非常实用。 在实现多选下拉树时，我们...
在本文中，我们将深入探讨如何使用ExtJS框架在前端动态生成表格，并结合后端数据进行展示。ExtJS是一个强大的JavaScript库，专用于构建富客户端Web应用程序，尤其在创建交互式用户界面方面表现突出。动态生成表格是...
在本例中，我们假设你已经在MyEclipse中创建了一个新的Web项目，并命名为"Extjs4"。将ExtJS 4.0.7的文件放入Webroot目录，以便于访问。 接下来，你需要设置一个学习环境。确保你的机器上已经安装了MyEclipse和...
在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中，我们将深入探讨两个核心组件：动态菜单（Dynamic Menus）和表格数据展示（Grid Data Display），以及如何在实际应用中进行操作。 动态菜单在Web应用中...
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
开发者在升级或初次接触EXTJS4时，应充分了解这些变化，以便更好地利用框架的优势。 总之，EXTJS4官方示例和API文档是学习和开发EXTJS4应用的基石。通过研究示例，你可以掌握EXTJS4的基本用法和组件；查阅API文档，...
### Extjs4.2 入门详细文档及表格初级制作 #### 一、Extjs4.2 下载与安装 **1.1 Extjs4.2 文件结构介绍** 初次接触到Extjs4.2的同学可能会对下载下来的文件夹结构感到困惑。下面我们将详细解释各个目录的作用： ...
"extjs bug 图标大全" 指的是在ExtJS框架中与错误或问题相关的图标集合。这些图标通常用于表示程序中的错误状态、警告信息或者调试标志，帮助开发者和用户更好地理解应用的状态。 在ExtJS中，图标通常通过CSS类来...
关于`执行时必须放到iis或appserver服务器上.txt`，这提示我们这个应用需要在Web服务器环境下运行，例如IIS（Internet Information Services）或AppServ，因为ExtJS应用通常依赖于Ajax请求和动态页面加载，这些都是...
EXTJS4 是一款强大的JavaScript框架，用于构建富客户端Web应用程序。EXTJS4的学习文档旨在帮助开发者掌握这一框架，尤其对于初学者来说，提供了宝贵的资源。文档中包含了从环境配置到实际应用开发的基础步骤。 首先...