Nested rowExpander application of ExtJS4 table_extjs

Today I am making a grid, and the data in it needs to be detailed. After much thought, I decided to make a nested table! Look at the picture below


For each record in the grid, click the number on the left to expand a detailed subtable. All data, including column names, are obtained from the background. The data of the subtable is temporarily stored locally. Do a test

Post some code here and leave a record

Copy the code The code is as follows:

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: "Detail 1", dataIndex: 'Field1' },
{ text: "Detail 2" , dataIndex: 'Field2' },
{ text: "Details 3", dataIndex: 'Field3' }
],
columnLines: true,
autoWidth: true,
autoHeight: true ,
//width: 400,
//height: 200,
frame: false,
// iconCls: 'icon-grid',
renderTo: renderId
}) ;

/* innerGrid.getEl().swallowEvent([
'mousedown', 'mouseup', 'click',
'contextmenu', 'mouseover', 'mouseout',
'dblclick', 'mousemove'
]); */

}


function destroyInnerGrid(record) {

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

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

}

Copy code The code is as follows:

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 a grid binding event. . You should be able to understand what the specific code means

Note that when defining the grid, use

Copy the code The code is as follows:

plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'

',
'

'
]
}],

This is the rowexpander plug-in. . Some people on the Internet say that you need to quote when using it, but can I still use it without citing anything?

Pay attention to the key id in the above three pieces of code. You can change this id, but it needs to be changed to the first item in the fields in the data sent from the background. . In my example, the first item of fields sent from the background is id.