Nested rowExpander applications for ExtJS4 tables

Do a grid today, the data needs to take details, think about it or make a table nested! See below
< img SRC = "border = 0 / / img.jbzj.com/file_images/article/201405/20140502114234.gif? 201442114257 ">  

For each record in the grid, click the + sign on the left to expand a detailed subtable. All data including column names are obtained from the background, and the data of the subtable is temporarily locally tested

Leave a record of some code here

 
function displayInnerGrid(renderId) { 

//Model for the inside grid store 
Ext.define('TestModel', { 
extend: 'Ext.data.Model', 
fields: [ 
{ name: 'Field1' }, 
{ name: 'Field2' }, 
{ name: 'Field3' } 
] 
}); 

//dummy data for the inside grid 
var dummyDataForInsideGrid = [ 
['a', 'a', 'a'], 
['b', 'b', 'b'], 
['c', 'c', 'c'] 

]; 

var insideGridStore = Ext.create('Ext.data.ArrayStore', { 
model: 'TestModel', 
data: dummyDataForInsideGrid 
}); 

innerGrid = Ext.create('Ext.grid.Panel', { 
store: insideGridStore, 
selModel: { 
selType: 'cellmodel' 
}, 
columns: [ 
{ text: " The detail 1", dataIndex: 'Field1' }, 
{ text: " The detail 2", dataIndex: 'Field2' }, 
{ text: " The detail 3", dataIndex: 'Field3' } 
], 
columnLines: true, 
autoWidth: true, 
autoHeight: true, 
//width: 400, 
//height: 200, 
frame: false, 
// iconCls: 'icon-grid', 
renderTo: renderId 
}); 

 

} 


function destroyInnerGrid(record) { 

var parent = document.getElementById(record.get('id')); 
var child = parent.firstChild; 

while (child) { 
child.parentNode.removeChild(child); 
child = child.nextSibling; 
} 

} 

 
grid_huizong.view.on('expandBody', function (rowNode, record, expandRow, eOpts) { 
//console.log(record.get('id')); 
displayInnerGrid(record.get('id')); 
}); 

grid_huizong.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) { 
destroyInnerGrid(record); 
}); 

The above code is the grid binding event. The specific code what meaning should be able to understand

Note that it is used when defining a grid

 
plugins: [{ 
ptype: 'rowexpander', 
rowBodyTpl : [ 
'<div id="{id}">', 
'</div>' 
] 
}], 

This is the rowexpander plugin. Some people on the Internet say you need to quote, but I can use without quoting anything?

Notice the key id in the above three pieces of code. You can change this id, but you need to change it to the first item in the fields in the data sent from the background. The fields that I'm sending in the background for this example the first entry is id