Данные 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();

Благодаря этому параллельному вопросу: Как обновить панель после загрузки данных?