Nested table instance created by extjs (click a row to expand the following sub-table)

<SCRIPT type = "text/JavaScript">
Ext. onready (function (){
VaR testdata = [
["Lug", "male", 26, [["Mathematics", 100], ["Chinese", 150]
, ["Lisi", "male", 25, [["Mathematics", 100], ["Chinese", 150]
, ["Zhang", "male", 27, [["Mathematics", 120], ["Chinese", 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 ){
// Find the grid
Window. testele = body;
// Alert (body. ID );
If (ext. domquery. Select ("Div. X-panel-bwrap", body). Length = 0 ){
// Alert ("");
VaR DATA = R. JSON [3];
VaR store = new Ext. Data. simplestore ({
Fields: ["class", "degrade"]
, Data: Data
});
VaR CM = new Ext. Grid. columnmodel ([
{Header: "subject", dataindex: 'class', width: 130, hideable: false, sortable: false, resizable: true}
, {Header: "score", dataindex: 'Demo', 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: "name", dataindex: 'name', width: 50, hideable: false, sortable: false}
, {Header: "gender", dataindex: 'sex', width: 130, hideable: false, sortable: false, resizable: true}
, {Header: "Age", 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]
}
);

});