Question

I am quite new to ExtJS so this may be silly question.

I have a custom Panel, extending Ext’s Panel class, which does an AJAX call and should create and populate an inner GridPanel with data obtained (columns are dynamic, so I can’t prepare the grid earlier). webService‘s first parameter is a callback function called with data when AJAX call encapsulated in webService object succeeds.

By now, I’m trying to populate my TablePortlet with hardcoded data and it works well when renderCallback method is called directly from constructor, but doesn’t work at all if called after AJAX request. I can trace in Firebug that in this case the method is still called, context is valid, store is filled with data, but nothing is rendered.

How should I populate the data properly? Is there maybe any render method that I’m 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 is:

context.doLayout();

Thanks to this parallel question: How to refresh a panel after data is loaded?