其中使用到的"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. git 命令删除远程分支

    删除 服务器上的分支: git push origin :sxz 分支名 注意 origin 后面的空格:

  2. DOS下运行C++程序配置

    闲来无事,想想C++是否一样能用dos来,编译运行程序呢,于是上网搜搜结果喜人,详见 http://blog.csdn.net/xiaoqinpeng/article/details/6556843 ...

  3. web编码

    1各种编码 A .1 html编码  -HTML标签 this.Response.Write(this.Server.HtmlEncode("<h1>的作用将文本设置为标题样式! ...

  4. 【C#/WPF】Image图片的Transform变换：平移、缩放、旋转

    WPF中图像控件Image的变换属性Transform: 平移 缩放 旋转 即要想实现图片的平移.缩放.旋转,是修改它所在的Image控件的Transform变换属性. 下面在XAML中定义了Imag ...

  5. SQL Server 禁止和启用约束

    Alter Table XXX nocheck constraint xxx Alter Table XXX check constraint xxx

  6. Ubuntu通过apt-get安装指定版本和查询指定软件有多少个版本

    一.通过apt-get安装指定版本 apt-get install <<package name>>=<<version>> 二.查询指定软件有多少个版 ...

  7. Elastic-Job - 分布式定时任务框架

    Elastic-Job - 分布式定时任务框架 摘要 Elastic-Job是ddframe中dd-job的作业模块中分离出来的分布式弹性作业框架.去掉了和dd-job中的监控和ddframe接入规范 ...

  8. Java实现 简单聊天软件

    简单的聊天软件 //客户端 package yjd9; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; ...

  9. 2016年第七届蓝桥杯C/C++程序设计本科B组省赛

    /* 2016年第七届蓝桥杯C/C++程序设计本科B组省赛 煤球数目(结果填空) 煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形) ...

  10. 异常：Error:Execution failed for task ':app:compileDebugJavaWithJavac'. > Compilation failed; see the compiler error output for details.

    碰到这个异常我也是挺无语的,因为Android Studio根本不会提示你详细的错误信息. 我们来看看这个博主:http://blog.csdn.net/runner__1/article/detai ...