其中使用到的"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. 安卓测试之---Monkey

    Tip:在阅读此篇之前,请先了解ADB命令: http://www.cnblogs.com/pearl07/p/8572390.html 一.什么是Monkey Monkey是Android SDK提 ...

  2. CPAN镜像使用帮助

    https://lug.ustc.edu.cn/wiki/mirrors/help/cpan ************************************************** 使用 ...

  3. 【转】Mysql两种存储引擎的异同【MyISAM和InnoDB】

    MySQL默认采用的是MyISAM. MyISAM不支持事务,而InnoDB支持.InnoDB的AUTOCOMMIT默认是打开的,即每条SQL语句会默认被封装成一个事务,自动提交,这样会影响速度,所以 ...

  4. Office 2013 Excel 打开文档很慢很慢的解决方法

    这个问题查了很多案例,试了很多方法,但是只有下面这个方法有用! 这几天打开excel文档很慢很慢,双击之后好久没反应,过会儿它才慢慢冒出来,当时将就了,刚刚休息的时候想着查一下吧,不然很影响工作效率! ...

  5. js中将文件的base64转换成file并上传到服务器

    ** * @param base64Codes * 图片的base64编码 */ function sumitImageFile(base64Codes){ var form=document.for ...

  6. Windows下 Pycharm连接Github 教程

    Pycharm连接Github 绑定账号 1.File->Settings->Version Control->Github Settings.png 会出现github,然后在旁边 ...

  7. java 支付宝wap支付初识

    最近突然想弄下支付宝的支付,因为感觉很好玩.中间遇到很多问题,查查找找,总算是整了两天给整出来了,这里为自己记录下. 第一步:直接去安卓支付宝的官方文档去,写的很清楚了已经,这里有源码https:// ...

  8. 关于shm_open和shm_unlink的使用问题（要连接库的原因）

    关于shm_open和shm_unlink的使用问题 referencefunctionobjectsystembehaviorlinux C programming in the UNIX envi ...

  9. server后台程序的内存使用问题

    眼下我开发的一个server后台程序存在这么一个问题,因为我的程序要不断的收发消息,并做统计.统计用的是stl的多重map.在统计中会不断的往map里赛数据. 可是每次统计后我都会调用clear()去 ...

  10. ubuntu下 apache phpmyadmin 的安装和使用

    // Apache //Task: Start Apache 2 Server /启动apache服务 # /etc/init.d/apache2 start //or $ sudo /etc/ini ...