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>