Verschachtelte rowExpander-Anwendung von ExtJS4 table_extjs

Heute erstelle ich ein Raster und die darin enthaltenen Daten müssen detailliert beschrieben werden. Nach langem Überlegen habe ich beschlossen, eine verschachtelte Tabelle zu erstellen! Schauen Sie sich das Bild unten an


Klicken Sie für jeden Datensatz im Raster auf die Zahl auf der linken Seite, um eine detaillierte Untertabelle zu öffnen. Alle Daten, einschließlich der Spaltennamen, werden aus dem Hintergrund abgerufen Daten der Untertabelle werden vorübergehend lokal gespeichert.

Posten Sie hier einen Code und hinterlassen Sie einen Datensatz

Kopieren Sie den Code Der Code lautet wie folgt:

function displayInnerGrid(renderId) {

//Modell für den Inside-Grid-Store
Ext.define('TestModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Field1' },
{ name: 'Field2' },
{ name: 'Field3' }
]
});

//Dummy-Daten für das Innengitter
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; .parentNode.removeChild(child);
child = child .nextSibling;}

}




Kopieren Code

Der Code lautet wie folgt: grid_huizong.view.on('expandBody', function (rowNode, record, expandRow, eOpts) { / /console.log(record.get('id')); displayInnerGrid(record.get('id')}); ', function (rowNode, record, expandRow, eOpts) { destroyInnerGrid (record);

Der obige Code ist ein Rasterbindungsereignis. . Sie sollten in der Lage sein zu verstehen, was der spezifische Code bedeutet

Beachten Sie, dass Sie beim Definieren des Rasters




Kopieren Sie den Code

Der Code lautet wie folgt:


plugins: [{
ptype: 'rowexpander',

rowBodyTpl : [ '

', '

' ] }],

Dies ist das Rowexpander-Plug-in. . Einige Leute im Internet sagen, dass man bei der Verwendung zitieren muss, aber kann ich es trotzdem verwenden, ohne etwas zu zitieren?

Achten Sie auf die Schlüssel-ID in den oben genannten drei Codeteilen. Sie können diese ID ändern, sie muss jedoch in den Feldern der aus dem Hintergrund gesendeten Daten geändert werden. . In meinem Beispiel ist das erste Element der vom Hintergrund gesendeten Felder die ID.