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  

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