Nested rowExpander applications for ExtJS4 tables
- 2020-03-30 02:46:12
- OfStack
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
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
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
< 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