其中使用到的"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. 关于Solr6.0中solrj使用简单例子

    solr6.0的solrJ接口有部分变化,下面列出了简单的使用实例,有需要的朋友可以参考下. package com.ailk.solr6; import java.io.IOException; i ...

  2. poj1564-Sum It Up(经典DFS)

    给出一个n,k,再给出的n个数中,输出所有的可能使几个数的和等于k Sample Input 4 6 4 3 2 2 1 15 3 2 1 1400 12 50 50 50 50 50 50 25 2 ...

  3. HTML5的video虽然可用controls来展示控件

    HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制.下面是一个小例子. 当 ...

  4. python idea 利用树莓派做家庭报警系统

    1 利用树莓派做家庭报警系统idea 功能如下: 1.程序家侧人不在家(7:00-6:00) 2.树莓派搭配摄像头,对这门进行图像识别,如果变化,门开了,就报警: 3.报警的方式是给我发短信,采信,或 ...

  5. 【WPF】ListBox无法滚动

    问题:ListBox显示多个条目时,无法滚动,也不显示滚动条. 办法: 给ListBox控件加上ScrollViewer.VerticalScrollBarVisibility和ScrollViewe ...

  6. C语言 · 阿尔法乘积

    算法训练 阿尔法乘积   时间限制:1.0s   内存限制:512.0MB        问题描述 计算一个整数的阿尔法乘积.对于一个整数x来说,它的阿尔法乘积是这样来计算的:如果x是一个个位数,那么 ...

  7. C语言 · 运用结构体的排序方法

    之前遇到排序只想着最原始的方法,诸如冒泡,选择,快速排序等等,刚刚跟大牛学会了结构体的方法来排序,这样的话以后再也不用怕成绩统计.名次排序之类的题目了. 首先头文件(基于大牛的方法,本人之后做题喜欢引 ...

  8. 函数调用前有"::"符号，什么意思啊？

    struct ifreq ifrf; ::memset(&ifrf,0,sizeof(ifrf)); ::strncpy(ifrf.ifr_name, ifr[addrCount].ifr_n ...

  9. ExtJS获取Grid的行数

    1.     grid.getSelectionModel().getCount() ;  // 获得当前选中的行数  2.     grid.getStore().getTotalCount();  ...

  10. 【springmvc笔记】第二课 环境搭建和第一个springmvc例子

    1. 开发工具准备 eclipse + jdk1.7 spring-framework-4.3.9.RELEASE 2. 新建Dynamic Web Project项目,命名为springmvc. 3 ...