Les données GridPanel ne sont pas rendues lorsqu'elles sont chargées après l'initalisation

Question

Je suis assez nouveau pour ExtJS, cela peut être une question idiote.

J'ai un panneau personnalisé, étendant la classe Panel d'Ext, qui effectue un appel AJAX et doit créer et remplir un GridPanel interne avec les données obtenues (les colonnes sont dynamiques, donc je ne peux pas préparer la grille plus tôt). webService Le premier paramètre est une fonction de rappel appelée avec des données lorsque l'appel AJAX encapsulé dans l'objet webService réussit.

Maintenant, je suis en train de remplir mon TablePortlet avec des données et il fonctionne hardcoded bien lorsque la méthode est appelée renderCallback directement à partir constructor, mais ne fonctionne pas du tout si elle est appelée après la demande AJAX. Je peux tracer dans Firebug que dans ce cas la méthode est toujours appelée, context est valide, store est rempli de données, mais rien n'est rendu.

Comment dois-je renseigner correctement les données? Y at-il peut-être une méthode render qui me manque?

TablePortlet = Ext.extend(Ext.Panel, { 

    constructor: function(portletTitle, sourceId, webService) 
    { 
     var context = this; 

     TablePortlet.superclass.constructor.call(this, { 
      title: portletTitle, 
      anchor: '100%', 
      frame: true, 
      collapsible: true, 
      draggable: true 
     }); 

     var grid = null; 

     function renderCallback(data) 
     { 
      if (grid != null) 
       context.remove(grid); 

      var store = new Ext.data.ArrayStore({ 
       autoDestroy: true, 
       fields:[{name:"a"}, {name:"b"}, {name:"c"}, {name:'d'}], 
      }); 
      store.loadData([['1','2','1','2'],['3','4','3','4']]); 

      grid = new Ext.grid.GridPanel({ 
       store: store, 
       colModel: new Ext.grid.ColumnModel([ 
        {header: 'A', dataIndex:'a'}, 
        {header: 'B', dataIndex:'b'}, 
        {header: 'C', dataIndex: 'c'}, 
        {header: 'D', dataIndex: 'd'}, 
       ]), 
       width: '100%', 
       autoHeight: true, 
       view: new Ext.grid.GridView(), 
       viewConfig: { 
        forceFit: true 
       }, 
       layout: 'fit' 
      }); 

      context.add(grid); 
     } 

     this.on('render', function() 
     { 
      webService.GetTable(renderCallback, sourceId); 
     }); 
    } 
}); 

Answer 1

Et la solution est:

context.doLayout(); 

Merci à cette question parallèle: How to refresh a panel after data is loaded?