How to make "Ext.getCmp('CompId').setLoading(true);" executed sequentially (synchronous) in Sencha Ext JS

Question

I want to ask some stuff about Sencha Ext JS. It is about command setLoading in Ext JS to make masking for specified Component. How to make it run synchronously, so the other JavaScript command behind this will only run after it finishes. I have tested it in web console (using Chrome) with this command :

Ext.getCmp('HomeTab').setLoading();
console.log(1);
console.log(2);

Then the output in console like this :

1
2
undefined

From that output we know that console.log commands console.log(1); and console.log(2);

are executed earlier than Ext.getCmp('HomeTab').setLoading();

So how to make it executed sequentially in order of JavaScript command?

Answer 1

Yes you Questions is correct... The following code used to scroll the child panel by clicking an event... here i added some more operation along with scrolling, here what i observed is, when i give animation = true to scroll method( Ext.getCmp('Parent').scrollBy(500, 500, true)) then what you said is correct because all the alert and console are executed before scrolling done... then i gave animation=false then the promraming order working fine with correct flow.

so console.log() and alert() are takes very less time to execute over animation... so come to your code, some animations are used inside extjs lib for loading purpose... thats why the order of flow changed..

 Ext.onReady(function () {
        Ext.create('Ext.panel.Panel', {
            //title: 'Parent',
            height: 200,
            autoScroll: true,
            width: 700,
            id: 'Parent',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'panel',
                title: 'Child',
                height: 1000,                
                items: [{
                    xtype: 'button',
                    text: 'Please Scroll me....',
                    listeners: {
                        click: {
                            fn: function () {
                                alert('log 1 started');
                                console.log(1);
                                alert('log 1 ended');
                                alert('Scrolling started');
                                Ext.getCmp('Parent').scrollBy(500, 500, false);
                                alert('scrolling ended');
                                alert('windows finding started');
                                console.log(Ext.isWindows);
                                alert('finding ended');
                                alert('log 2 started');
                                console.log(2);
                                alert('log 2 ended');

                            }
                        }
                    }
                }]

            }]
        })
    });

I think its not a problem. because each process are work us independent way... for example see the following code

    var a = 500;                                
    console.log(a);
    var b = 100;
    console.log(b);
    alert('scrolling started');
    Ext.getCmp('Parent').scrollBy(a, b=10, true);
    alert('scrolling ended');
    console.log(b);
    b = 200;
    console.log(b);

so here the scrolling done by ony(x=500,y=10) not by y=100 or 200 so here its working fine sir... there is no error...

Answer 2

Your assumption is not correct, undefined is just the return value of the last function which was executed in the console, i.e. console.log(2);.

Try executing console.log(2); only, and it will also return:

2
undefined

(note that there's a small arrow <- to indicate that it is the return value)

Try the following:

console.log(Ext.getCmp('HomeTab').setLoading());
console.log(1);
console.log(2);

and you will see that the sequence of execution is correct.

---

EDIT:

AJAX requests are asynchronous (as the name "Asynchronous JavaScript and XML" implies :)), i.e. the request to the server will be polled and the script execution continues while the client is waiting for the server's response.

That means your code will mask the panel, start the AJAX request and immediately unmask it again (before the AJAX request has finished).

To solve this, put your code for unmasking in your callback functions:

Ext.Ajax.request({ 
    method : "GET", 
    url: './Services/ServiceData', 
    async: false, 
    success : function(response, opts) { 
        var json = JSON.parse(response.responseText); 
        if(json){ 
            //do something 
        }
        Ext.getCmp('').setLoading(false);
    }, 
    failure: function(response, opts) { 
        Ext.Msg.alert('Not Found', 'Error '+ response.status); 
        Ext.getCmp('').setLoading(false);
    } 
});

Answer 3

Try using callback function, fiddle here: https://fiddle.sencha.com/#fiddle/2d8

Functions in the fiddle gets executed sequentially -> 1) setLoading to true, 2) a function with callback gets executed and 3) the callback function sets the loading to false.