Данные GridPanel не отображаются при загрузке после инициализации

Question

Я довольно новичок в ExtJS, так что это может быть глупый вопрос.

У меня есть настраиваемая панель, расширяющая класс Panel Ext, которая выполняет вызов AJAX, и должна создавать и заполнять внутреннюю GridPanel полученными данными (столбцы динамические, поэтому я не могу подготовить сетку раньше). Первый параметр webService - это функция обратного вызова, вызываемая с данными, когда вызов AJAX, заключенный в объект webService, успешно завершен.

В настоящее время я пытаюсь заполнить свою TablePortlet с закодированных данных, и она работает хорошо, когда renderCallback метод вызывается непосредственно из constructor, но не работает на всех, если вызывается после запроса AJAX. Я могу отслеживать в Firebug, что в этом случае метод все еще вызывается, context действителен, store заполнен данными, но ничего не отображается.

Как правильно заполнить данные? Может быть, какой-нибудь метод render, который мне не хватает?

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

И решение:

context.doLayout(); 

Благодаря этому параллельному вопросу: How to refresh a panel after data is loaded?