`
chenxueyong
  • 浏览: 341947 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

EXTJS制作的嵌套表格实例(点击一行,展开下面的子表)

阅读更多
<script type="text/javascript">
Ext.onReady(function(){
var testData=[
   ["lug","男",26,[["数学",100],["语文",150]]]
   ,["lisi","男",25,[["数学",100],["语文",150]]]
   ,["zhang","男",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){
  //查找 grid
  window.testEle=body;
  //alert(body.id);
  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 sm=new Ext.grid.CheckboxSelectionModel({singleSelect: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>
分享到:
评论
4 楼 ynymf 2013-07-22  
错位问题看这里:http://www.cnblogs.com/ynymf/p/3166039.html


现在比较蛋疼的是选中子表的行号,父表的选中行也跟着变。
3 楼 553718707 2012-06-15  
楼主有没有解决方法啊?
2 楼 553718707 2012-06-15  
这个代码对于,子表格的列数很多的时候会出现子表格的列与数据行错位。
1 楼 ghycn 2012-04-21  

运行该代码,点击行时为什么子表不在该行的下面显示呢。
求解答,求完整代码。谢谢

相关推荐

    一个extjs表格的实例

    extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。

    ExtJs表格点击超链接获取行的值

    ### ExtJs表格点击超链接获取行的值:深入解析与应用 #### 一、ExtJs表格超链接渲染 在ExtJs框架中,我们经常需要在表格(`Ext.grid.Panel`)中显示超链接,并且当用户点击这些超链接时,能够获取到当前行的数据。...

    extjs 弹窗的简单实例

    ExtJS 是一个强大的JavaScript应用程序框架,专用于构建富客户端Web应用。它提供了丰富的组件库,包括弹窗(Window)组件,使得开发者可以方便地创建具有交互性和动态效果的用户界面。在“extjs 弹窗的简单实例”中...

    EXTJS简单MVC实例

    只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载

    ExtJs入门实例(内含N个实例源码)

    ExtJS入门实例、包含各种详细代码,非常适合初学者学习

    Extjs表格合并代码

    ExtJS是一款强大的JavaScript库,用于构建富客户端应用程序,其表格组件是功能丰富的数据展示工具。在开发过程中,我们可能会遇到需要合并表格单元格的情况,例如为了创建复杂的报表或呈现层次结构的数据。 表格...

    extjs动态生成表格,前台+后台

    动态生成表格是ExtJS中的一个重要功能,它允许开发者根据需求灵活地构造表格结构和数据。 首先,我们需要了解ExtJS中的核心组件之一——GridPanel。GridPanel是一个显示二维数据的组件,通常用于展示大量结构化的...

    ExtJS布局之border实例

    资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号,支持checkbox全选,动态选择显示哪些列...

    ExtJS4 表格的嵌套 rowExpander应用

    6. **嵌套表格的创建**:当用户点击行展开图标时,可以通过定义的函数(如displayInnerGrid)创建一个嵌套的表格。在这个函数中,可以定义子表格的数据模型TestModel和数据dummyDataForInsideGrid。 7. **事件处理*...

    ExtJs界面嵌套源码

    ExtJs的页面布局、界面设计的源码 直接运行index.html可看效果,源码在里面

    extjs模拟excel表格

    ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件库,包括用于创建类似Excel的表格的功能。在本文中,我们将深入探讨如何使用ExtJS来模拟Excel表格,以及实现Excel的各种功能...

    extjs构造矩阵表格

    下面我们将深入探讨EXTJS构建矩阵表格的步骤和涉及的技术点。 1. **创建数据存储(Store)**: - `TMstore` 是一个包含整个矩阵数据的主Store,通过HttpProxy连接到服务器端的'json/getMatrixInfo.do'获取数据,...

    extjs的一个实例

    利用ext的grid、form等组件实现了对学生信息的增删改查。并用饼状图对学生的男女比例进行了统计。

    extjs动态表格实例(封装GRID,从STRUTS2读取后台数据 )

    在这个"extjs动态表格实例"中,我们将探讨如何使用ExtJS封装Grid并从Struts2框架的后台获取数据。 首先,让我们了解ExtJS中的Grid组件。Grid是ExtJS的一个关键组件,它用于展示结构化数据,并支持多种操作,如排序...

    ExtJs 学习实例

    ExtJs学习实例ExtJs学习实例ExtJs学习实例

    ExtJs 开发指南书籍 实例 可视化工具

    ExtJs 是一个强大的JavaScript框架,主要用于构建富互联网应用程序(Rich Internet Applications, RIA)。它提供了丰富的组件库,包括网格、表单、面板、菜单、工具栏等,支持创建复杂的、桌面应用级别的用户界面。...

    ExtJS与.NET结合开发实例

    ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例

    extjs后台模版下载实例

    使用extjs实现的超炫后台模版下载实例 整理测试了很久特来贡献

    ExtJs 实例+ExtJs中文教程(学习extjs必备)

    ExtJs是一种基于JavaScript的富客户端应用开发框架,用于构建交互式和复杂的Web应用程序。它提供了大量的组件和功能,包括布局管理、数据绑定、表格、菜单、工具提示等,使得开发者可以构建具有桌面应用般用户体验的...

Global site tag (gtag.js) - Google Analytics