How to update the panel after loading data?

Question

I have an extjs panel displayed inside a div as:

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

After loading the page, the panel is empty, but when the browser is resized, the contents appear as if by magic!

I think the data did not finish loading when the panel is displayed for the first time.

How can I show content without resizing the browser?

Answer 1

I suspect the problem is that you need to explicitly call the panel display. After creating the panel, make the following call:

panel.doLayout();

Sencha : " , , ".

Answer 2

, ? , centerPanel div. , , , , centerPanel , , . doLayout() , , , .

Answer 3

bmoeskau , , , (store.load, ajax ..). , , (. sencha docs)

Answer 4

Sentence

tedder helped me, but in itself did not solve the problem that I encountered: adding one Ext.draw.Component, I got an empty panel. The curious part: the panel looked white, but the DOM components were there, and I could test them using, for example, the Chrome Developer Tools.

I started working using a workaround. I added these 2 instructions after the call this.add(component):

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

Hiding the panel, and then its visibility again, in some obscure way, performs the task.