2011-04-12 3 views
2

HINested Grille EN ExtJS

Comment concevoir des grilles emboîtées dans ExtJS S'il vous plaît fournir quelques échantillons (Comment utiliser RowExpander dans ExtJS GridPanel)

+0

Ceci est un exemple concret: http://www.programering.com/a/MDN4cTMwATY.html – MacGyver

Répondre

7

Essayez quelque chose comme ceci:

//Create the Row Expander. 
var expander = new Ext.ux.grid.RowExpander({ 
    tpl : new Ext.Template('<div id="myrow-{Id}" ></div>') 
}); 

//Define the function to be called when the row is expanded. 
function expandedRow(obj, record, body, rowIndex){ 
    //absId parameter for the http request to get the absence details. 
    var absId = record.get('Id'); 

    var dynamicStore = //the new store for the nested grid. 

    //Use Id to give each grid a unique identifier. The Id is used in the row expander tpl. 
    //and in the grid.render("ID") method. 
    var row = "myrow-" + record.get("Id"); 
    var id2 = "mygrid-" + record.get("Id"); 

    //Create the nested grid.   
    var gridX = new Ext.grid.GridPanel({ 
     store: dynamicStore, 
     stripeRows: true, 
     columns: [ 
      //columns 
     ], 
     height: 120, 
     id: id2     
    });   

    //Render the grid to the row expander template(tpl). 
    gridX.render(row); 
    gridX.getEl().swallowEvent([ 'mouseover', 'mousedown', 'click', 'dblclick' ]); 
} 

//Add an expand listener to the Row Expander. 
expander.on('expand', expandedRow); 

Vous pouvez trouver plus d'informations sur ce Here

1

Il est possible de le faire Comme les autres l'ont mentionné, je recommande cependant de ne pas y aller.

Motifs: Les fuites de mémoire dues aux sous-réseaux ne sont pas détruites correctement. Le modèle de sélection ne fonctionne pas correctement

+0

Pourriez-vous fournir plus d'informations sur ces fuites de mémoire? –

+0

Une fuite de mémoire se produit, car la grille est détruite dans le DOM lorsque la grille est actualisée, mais les gestionnaires d'événements attachés, etc., existent toujours dans JS. – eli