Extjs Dynamic Grid

Question

J'essaie de créer une grille dynamique en utilisant Extjs. La grille est construite et affichée lorsqu'un événement de clic est déclenché, puis une requête ajax est envoyée au serveur pour extraire les colonnes, les enregistrements et la définition des enregistrements a.k.a Store Fields. Chaque nœud peut avoir une structure de grille différente et cela dépend du niveau du nœud dans l'arbre.

La seule façon que je suis venu avec à ce jour est

 function showGrid(response, request) {     
     var jsonData = Ext.util.JSON.decode(response.responseText);     
     var grid = Ext.getCmp('contentGrid'+request.params.owner); 

     if(grid) { 
      grid.destroy();         
     } 

     var store = new Ext.data.ArrayStore({ 
      id : 'arrayStore',     
      fields : jsonData.recordFields, 
      autoDestroy : true 
     });    

     grid = new Ext.grid.GridPanel({ 
      defaults: {sortable:true}, 
      id:'contentGrid'+request.params.owner, 
      store: store,   
      columns: jsonData.columns, 
      //width:540, 
      //height:200, 
      loadMask: true 
     });   


     store.loadData(jsonData.records);   
     if(Ext.getCmp('tab-'+request.params.owner)) { 
      Ext.getCmp('tab-'+request.params.owner).show(); 
     } else {     
      grid.render('grid-div'); 
      Ext.getCmp('card-tabs-panel').add({ 
      id:'tab-'+request.params.owner, 
      title: request.params.text, 
      iconCls:'silk-tab', 
      html:Ext.getDom('grid-div').innerHTML, 
      closable:true 
      }).show();   
     } 
    } 

La fonction ci-dessus est appelée lorsqu'un événement clique est

 'click': function(node) { 
      Ext.Ajax.request({ 
       url: 'showCtn', 
       success: function(response, request) {        
        alert('Success');             
        showGrid(response,request); 
       }, 
       failure: function(results, request) { 
        alert('Error'); 
       }, 
       params: Ext.urlDecode(node.attributes.options);           
     } 

Le problème que je reçois avec ce code est que une nouvelle grille est affichée à chaque fois que la fonction showGrid est appelée. L'utilisateur final voit les anciennes grilles et la nouvelle. Pour atténuer ce problème, j'ai essayé de détruire la grille et de supprimer également l'élément de grille sur chaque requête, ce qui semble résoudre le problème uniquement que les enregistrements ne sont jamais affichés cette fois.

if(grid) { 
      grid.destroy(true);         
     } 

Le comportement que je cherche est d'afficher le résultat d'une grille dans un onglet et si cet onglet existe remplacé l'ancienne grille. Toute aide est appréciée.

Merci

Answer 1

Lorsque vous essayez d'ajouter votre grille à l'onglet comme ceci:

html:Ext.getDom('grid-div').innerHTML, 

Poste est pas au courant étant une composante de réseau valide. Au lieu de cela, vous ajoutez simplement un balisage HTML qui ressemble à une grille, mais le TabPanel ne sera pas conscient qu'il s'agit d'un composant de grille. Au lieu de cela, vous devez ajouter la grille elle-même en tant qu'onglet (un GridPanel est un Panel et n'a pas besoin d'être imbriqué dans un panneau parent). Vous pouvez le faire et d'appliquer également les configs onglet nécessaires comme ceci:

Ext.getCmp('card-tabs-panel').add(
     Ext.apply(grid, { 
      id:'tab-'+request.params.owner, 
      title: request.params.text, 
      iconCls:'silk-tab', 
      closable:true 
     }); 
    }).show(); 

BTW, la création et la destruction constante des grilles n'est pas une stratégie idéale si vous pouvez l'éviter. Il peut être préférable de simplement masquer et afficher à nouveau les grilles (et recharger leurs données) en fonction du type de grille requis si cela est possible (en supposant que l'ensemble des types de grilles est fini).

Answer 2

Une option potentielle est d'utiliser le champ metaData sur le JsonStore qui permet la reconfiguration dynamique des colonnes de la grille selon les nouveaux ensembles de données.

De

L'un des messages de blog les plus utiles sur ce que Ive a trouvé est celui-ci: http://blog.nextlogic.net/2009/04/dynamic-columns-in-ext-js-grid.html et l'information d'origine est bien documenté à http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader