ExtJS 4.2 setLoading() after expanding panel issue

Question

I have a panel that is collapsible but by default its collapsed until the user selects an element in the view.

In my controller, when the user clicks on an element I listen to the event and then I do the following:

.....
pnlDetail.expand(true);

pnlDetail.setLoading('Loading details...');
.....

But the panel never shows the loading mask. Seems that it has to wait until the panel is fully expanded.

So I then try the following:

  pnlDetail.expand(true);

            Ext.Function.defer(function() {
                pnlDetail.setLoading('Loading details...');
            }, 500);

This time the panel show the loading mask.

Any clue why this happens? Is this an Issue or something I can workaround?

JuHwon JuHwon · Accepted Answer · 2014-08-19T07:29:25

If i try the following code in https://fiddle.sencha.com/#home it works...

Ext.application({
    name : 'Fiddle',

    launch : function() {

        var panel = Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            width: 200,
            html: '<p>World!</p>',
            renderTo: Ext.getBody(),
            collapsed: true,
            collapsible: true
        });

        panel.expand(true);

        panel.setLoading('Loading details...');
    }
});

So i dont understand why this is not working in your application. What version are you using? Though you could try it with a single event handler on the expand event like this:

pnlDetail.on('expand', function(p){ p.setLoading('Loading details...'); }, this, { single: true });

ExtJS 4.2 setLoading() after expanding panel issue

1 Answers