Application rowExpander imbriquée de ExtJS4 table_extjs

Aujourd'hui, je crée une grille et les données qu'elle contient doivent être détaillées. Après mûre réflexion, j'ai décidé de créer un tableau imbriqué ! Regardez l'image ci-dessous


Pour chaque enregistrement de la grille, cliquez sur le numéro à gauche pour développer un sous-tableau détaillé. Toutes les données, y compris les noms de colonnes, sont obtenues à partir de l'arrière-plan. les données de la sous-table sont temporairement stockées localement. Faites un test

Publiez du code ici et laissez un enregistrement

Copiez le code Le code est le suivant :

function displayInnerGrid(renderId) {

//Modèle pour le magasin de grille interne
Ext.define('TestModel', {
étendre : 'Ext.data.Model',
champs : [
{ nom : 'Field1' },
{ nom : 'Field2' },
{ nom : 'Field3' }
]
});

//données factices pour la grille intérieure
var dummyDataForInsideGrid = [
['a', 'a', 'a'],
['b', 'b', 'b' ],
['c', 'c', 'c']

]

var insideGridStore = Ext .create('Ext.data.ArrayStore', {
model: 'TestModel',
data: dummyDataForInsideGrid
}); Panel', {
store : insideGridStore,
selModel : {
selType : 'cellmodel'
},
colonnes : [
{ text : "Détail 1", dataIndex : ' Field1' },
{ texte : "Détail 2" , dataIndex : 'Field2' },
{ texte : "Détails 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'
]); */

}


fonction destroyInnerGrid(record ) {

var parent = document.getElementById (record.get('id'));
var child = parent.firstChild; while (child) {
child; .parentNode.removeChild(child);
child = child .nextSibling
}

}

Copier code

Le code est le suivant : 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);
});


Le code ci-dessus est un événement de liaison de grille. . Vous devriez être capable de comprendre ce que signifie le code spécifique

Notez que lors de la définition de la grille, utilisez

Copiez le code

Le code est le suivant : plugins : [{ ptype : 'rowexpander', rowBodyTpl : [

'

',

'

'
]
}],


Ceci est le plug-in rowexpander. . Certaines personnes sur Internet disent qu'il faut citer lorsqu'on l'utilise, mais puis-je quand même l'utiliser sans rien citer ?

Faites attention à l'identifiant de clé dans les trois morceaux de code ci-dessus. Vous pouvez modifier cet identifiant, mais il doit être remplacé par le premier élément dans les champs des données envoyées depuis l'arrière-plan. . Dans mon exemple, le premier élément de champs envoyé depuis l'arrière-plan est l'identifiant.