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.

Answer 3

bmoeskau is right, also my guess is you have an async server request that loads your data (store.load, ajax, etc) -you could call the layout after that store loads by regestering a callback function (see sencha docs)

Answer 4

tedder suggestion helped me, but in itself did not solve a similar problem I had: adding one Ext.draw.Component I got a blank panel. The curious part is, the panel looked white, but the DOM components were all there and I could inspect them using e.g. Chrome developer tools.

I got it working by using a workaround. I added those 2 instructions after the call to this.add(component):

this.setVisible(false);
this.setVisible(true);

Hiding the panel and then making it visible again, in some obscure way, does the job.