GridPanel data is not displayed when loading after initialization

Question

I'm new to ExtJS, so this might be a dumb question.

I have a custom panel that extends the Ext Panel class, which makes an AJAX call and needs to create and populate the internal GridPanel with the received data (the columns are dynamic, so I can not prepare the grid before). webServicethe first parameter is a callback function called with data when an AJAX call enclosed in an object webServicecompletes successfully.

I am currently trying to populate my TablePortlethard-coded data, and it works well when the method renderCallbackis called directly from constructor, but does not work at all if called after an AJAX request. I can track in Firebug that in this case the method is still being called, contextvalid, storepopulated with data, but nothing is displayed.

How to fill in the data? Is there any method renderthat I am missing?

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

And the solution:

context.doLayout();

Thanks to this parallel question: How to update the panel after loading the data?