`
chenxueyong
  • 浏览: 345974 次
  • 性别: 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  

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

相关推荐

    ExtJS4 表格的嵌套 rowExpander应用

    在ExtJS4中实现表格的嵌套使用rowExpander插件是一项非常实用的技术,它允许我们为表格中的每一行添加一个可展开的详细信息区域。该功能通过一个简单的“+”号来标识,用户点击即可展示子表格,子表格数据可动态从...

    Extjs3.0 cookbook

    这本书为读者提供了一系列的实例,通过这些实例,读者可以逐步学习EXTJS的核心概念和技术。 **EXTJS 3.0核心概念** 1. **组件(Components)**:EXTJS的基础是组件模型,包括面板(Panel)、窗口(Window)、表格...

    前台用extjs后台用java.如何导出excel报表

    接着,使用`for`循环将表头`heads`添加到工作表的第一行,然后用嵌套的`for`循环将`datalist`中的数据逐行写入工作表。 在设置完所有单元格后,需要设置HTTP响应的头部信息,`Content-disposition`用于指示浏览器以...

    ExtJS之布局详解

    ExtJS 是一种强大的JavaScript库,专门用于构建富客户端应用程序,特别是Web应用。在ExtJS中,布局管理是至关重要的部分,因为它决定了用户界面组件如何在容器内排列和展示。布局管理器负责根据指定的布局类型调整和...

    Ext3.4.0复杂(多行)表头+锁定多列例子

    例如,第一行可能表示大类,第二行可能是子类,以此类推。 “锁定多列”则是指在表格滚动时,保持某些列(如列标题或关键列)始终可见。这在处理大量数据时非常有用,因为它允许用户在滚动查看数据时,依然能保持对...

    ExtJS2.0实用简明教程

    1. **组件化开发**:ExtJS 2.0 强调组件化编程,提供了一系列可复用的UI组件,如表格、面板、表单、树形结构等,方便开发者构建复杂的用户界面。 2. **数据绑定**:2.0版本引入了强大的数据绑定机制,允许组件与...

    EXTjs2.0 教程 包括《EXT2.0简明教程》和《ext基础教程》两份教材

    EXTjs,全称为EXT JavaScript Library,是一个功能丰富的前端JavaScript库,尤其在构建桌面级Web应用程序时表现出色。EXT2.0作为EXTjs的一个早期版本,虽然现在已经被更现代的EXT版本取代,但其核心概念和架构对理解...

    ExtJS模板使用说明(含代码示例).zip

    ExtJS是一款强大的JavaScript框架,专用于构建富客户端Web应用程序。其强大的组件模型和丰富的API使得开发者可以轻松创建复杂的用户界面。在本说明中,我们将深入探讨ExtJS中的模板(Template)使用,包括其概念、...

    华为java面试题

    ExtJS提供了一套完整的UI组件库,包括表格、树形控件、网格等,支持响应式布局和多浏览器兼容性。 4. **数据库简单的存储过程** - **知识点解析**:存储过程是在数据库中预编译的SQL语句集合,可以在客户端调用以...

Global site tag (gtag.js) - Google Analytics