其中使用到的"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. NIS & Kerberos配置

    NIS & Kerberos配置 所需RPM包列表: krb5-server-1.10.3-42.el6.x86_64.rpm krb5-workstation-1.10.3-42.el6.x ...

  2. 解决 windows10和ubuntu16.04双系统下时间不对的问题

  3. 手风琴式焦点图jQuery特效

    手风琴式焦点图jQuery特效是一款鼠标点击人物图像滑动切换案例说明信息代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="ag-cont ...

  4. wampserver 报错 Fatal error:Call to undefined function curl_init()

    解决办法如下: 左键wampserver软件,找到PHP,然后找到扩展,点击php_curl开启这个扩展. 然后找到PHP的配置文件php.ini,路径为D:\wamp\bin\php\php5.3. ...

  5. C语言 · 第二大整数

    算法提高 第二大整数   时间限制:1.0s   内存限制:512.0MB      问题描述 编写一个程序,读入一组整数(不超过20个),当用户输入0时,表示输入结束.然后程序将从这组整数中,把第二 ...

  6. Android——edittext的几个属性

    <EditText android:layout_columnSpan="2" android:hint="To" android:layout_grav ...

  7. Oracle分页(limit方式的运用)

    select * from a_matrix_navigation_map where rowid not in(select rowid from a_matrix_navigation_map w ...

  8. [LintCode]转换字符串到整数

    问题描述: 实现atoi这个函数,将一个字符串转换为整数.如果没有合法的整数,返回0.如果整数超出了32位整数的范围,返回INT_MAX(2147483647)如果是正整数,或者INT_MIN(-21 ...

  9. MVC教程二：从控制器中获取URL的值

    一.从控制器中获取URL的值有三种方式: 1.使用Request.QueryString[] 例如: string value = Request.QueryString["BookId&q ...

  10. JavaScript：DOM操作

    一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...