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>