其中使用到的"RowExpander.js"为extjs官方示例中自带的。

实现这个嵌套表格要注意两点技巧：

1 提供给外层表格的dataStore的数据源以嵌套数组的形式表示细节区的数据,如下面的黑体所示。

  
  1. var testData=[
  2. ["lugreen","男",26,[["数学",100],["语文",150]]]
  3. ,["lisi","男",25,[["数学",100],["语文",150]]]
  4. ,["zhangsan","男",27,[["数学",120],["语文",158]]]
  5. ];

使用数组集中record对象的json属性来获取以细节区数据

var data=r.json[3];

2 在rowExpander的 expand事件中添加嵌套表格.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="window.aspx.cs" Inherits="Ext.window" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>test</title>

    <script type="text/javascript">

    </script>

    <link href="ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="ext-3.4.0/adapter/ext/ext-base.js" type="text/javascript"></script>

    <script src="ext-3.4.0/ext-all.js" type="text/javascript"></script>

    <script src="ext-3.4.0/examples/ux/RowExpander.js" type="text/javascript"></script>

    <script type="text/javascript">

        Ext.onReady(function () {

            var testData = [["lugreen", "男", 26, [["数学", 100], ["语文", 150]]],

             ["lisi", "男", 25, [["数学", 100], ["语文", 150]]],

             ["zhangsan", "男", 27, [["数学", 120], ["语文", 158]]]];

            storeTest = new Ext.data.SimpleStore({

                fields: ["name", "sex", "age", "grade"],

                data: testData

            });

            var expander = new Ext.grid.RowExpander({ tpl: new Ext.XTemplate('<div class="detailData">', '', '</div>') });

            expander.on("expand", function (expander, r, body, rowIndex) {

                window.testEle = body;

                if (Ext.DomQuery.select("div.x-panel-bwrap", body).length == 0) {

                    //alert("a");

                    var data = r.json[3];

                    var store = new Ext.data.SimpleStore({

                        fields: ["class", "degrade"],

                        data: data

                    });

                    var cm = new Ext.grid.ColumnModel([{

                        header: "科目",

                        dataIndex: 'class',

                        width: 130,

                        hideable: false,

                        sortable: false,

                        resizable: true

                    },

                         {

                             header: "成绩",

                             dataIndex: 'degrade',

                             width: 130,

                             hideable: false,

                             sortable: false,

                             resizable: true

                             }]);

                    Ext.DomQuery.select("div.detailData")[0];

                    var grid = new Ext.grid.GridPanel({

                          store: store,

                          cm: cm,

                          renderTo: Ext.DomQuery.select("div.detailData", body)[0],

                          autoWidth: true,

                          autoHeight: true

                      });

                }

            });

              var cm = new Ext.grid.ColumnModel([expander,

                { header: "姓名", dataIndex: 'name', width: 50, hideable: false, sortable: false },

                 { header: "性别", dataIndex: 'sex', width: 130, hideable: false, sortable: false, resizable: true },

                 { header: "年龄", dataIndex: 'age', width: 130, hideable: false, sortable: false, resizable: true }

             ]);

            var grid = new Ext.grid.GridPanel({

                          id: 'testgrid',

                          store: storeTest,

                          cm: cm,

                          renderTo: "grid1",

                          width: 780,

                          autoHeight: false,

                          height: 300,

                          listeners: {},

                          plugins: [expander]

            });

        });

    </script>

</head>

<body>

    <div id="grid1">

    </div>

    <div id="grid2">

    </div>

</body>

</html>

　　

Ext3.4-EXT之嵌套表格的实现的更多相关文章

  1. 跟我一起玩转FineUI之嵌套表格

    最近一直在研究FineUI(http://www.fineui.com/),那么什么是FineUI呢,FineUI是基于 ExtJS 的专业 ASP.NET 控件库.创建 No JavaScript, ...

  2. ExtJS中实现嵌套表格

    先看效果: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  3. html嵌套表格示例

    常用嵌套表格示例,出自<网页开发手记:HTML+CSS+JavaScript实战详解>   <html>   <head>   <title>嵌套表格布 ...

  4. C# 绘制PDF嵌套表格

    嵌套表格,即在一张表格中的特定单元格中再插入一个或者多个表格,使用嵌套表格的优点在于能够让内容的布局更加合理,同时也方便程序套用.下面的示例中,将介绍如何通过C#编程来演示如何插入嵌套表格到PDF文档 ...

  5. Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行

    本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...

  6. elementUI表单嵌套表格并对每行进行校验

    elementUI表单嵌套表格并对每行进行校验 elementUI 表单嵌套表格并进行校验. 目录 效果展示 代码链接 关键代码 完整代码 效果展示 先看看这是不是需要的效果^_^ ​ 如图,Elem ...

  7. ExtJs 学习之开篇（三）Ext.grid.Panel表格中的处理

    Ext.grid.Panel Ext.create('Ext.grid.Panel',{        title:'测试表格',        width:400,        height:20 ...

  8. Ext Designer生成表格

    1.生成表格代码 Ext.MyPanel=Ext.extend(Ext.Panel ,{ xtype:"panel", title:"我的面板", width: ...

  9. element-ui中的表格嵌套表格

    element-ui中有详细的各种表格及表格方法.也有表格展开出现二级的样式,但是却没有表格嵌套二级表格的方案,于是就自己写了一个,样式图如下: 展开后如下 这就是一个普通的二级表格嵌套,用的是el- ...

随机推荐

  1. 树形列表 jqtree数据 使用

    jqtree调试笔记 用的是data-url的方式从远程加载的数据返回的数据格式须要是json,当然也可以使用text模式,但是恐怕要自己写格式的解析了 其中返回数据的时候,是在这个函数的末尾_loa ...

  2. HTML onmousedown 事件属性 关于鼠标按键的问题；

    在项目中遇到一个问题,就是点击任意键关闭弹窗的处理:出现了一个bug:就是在angularjs项目中两个controller之间的事件跳转,使用的ng-show =“iscontext” : 如所示: ...

  3. 采用Filter的方法解决Servlet的编码问题

    这样比你自己在Servlet代码中硬编码request.setCharacterEncoding, response.setCharacterEncoding方便多了 总之,如果你添加了这个filte ...

  4. win8 X64 未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序

    操作系统是Windows 8 64位,安装了Microsoft Office 2013,从SQL Server 2008中导入Excel文件时出现提示: 未在本地计算机上注册“Microsoft.AC ...

  5. 汇编入门学习笔记 （九）—— call和ret

    疯狂的暑假学习之  汇编入门学习笔记 (九)--  call和ret 參考: <汇编语言> 王爽 第10章 call和ret都是转移指令. 1. ret和retf ret指令:用栈中的数据 ...

  6. POST请求中，往URL传递数组

    POST请求中,前端/客户端需要手动拼接URL,然后走接口跟后端交互. 若想传递数组,可以按照如下的拼接形式: &materialsTypeId=11&materialsTypeId= ...

  7. 【C#】获取泛型<T>的真实类型

    需求:在包含泛型T的类或方法中,想要根据T的具体类型,进行相应的处理,需求伪代码如下: public void Test<T>() { if(T is string) { // do so ...

  8. 【WPF/C#】联网异步获取二进制文件（如图片）的流程

    步骤: 联网异步获取Json数据. 使用Json.NET工具,反序列化Json为对应的实体类,获得该实体类的对象. 从对象身上获取图片路径(实体类中定义了头像图片是string类型的文件路径). 根据 ...

  9. [镜像]镜像操作losetup

    安装完之后查看一下版本 /usr/sbin/debootstrap –version转自:http://blog.csdn.net/cnyyx/article/details/27182833 1.挂 ...

  10. [Makefile]多目录Makefile写法

    最近需要写一个测试程序,这个测试程序需要集成一些功能,写在同一个文件看上去很不好,多个文件的Makefile又不是很熟,于是分享下面这篇文章 先介绍下,调试Makefile时,想知道某个变量的值,怎么 ...