How to refresh a panel after data is loaded?

Question

I have a extjs panel rendered inside a div like this:

panel = new Ext.Panel({
            layout : 'fit',
            renderTo: 'my_div',
            monitorResize: true, // relay on browser resize
            height: 500,
            autoWidth: true,
            items : [
                centerPanel
            ],
            plain : true
        });

After the page has loaded the panel is empty, but when I resize the browser the contents appears by magic!

I think the data has not finished loading when the panel is rendered the first time.

How can I get the contents to show without resizing the browser?

Answer 1

I suspect the issue is that you need to explicitly cause the panel to be rendered. After creating the panel, make the following call:

panel.doLayout();

Sencha documentation says "A call to this function is required after adding a new component to an already rendered container, or possibly after changing sizing/position properties of child components."

Answer 2

Any reason why you're nesting a panel within a panel? Seems like centerPanel could be directly rendered to your containing div. Also, the issue is most likely how you have centerPanel configured, or how you're loading it, neither of which you're showing here. You should not need to call doLayout() manually in this case, it's probably an issue with how your components are configured.