extjs setLoading（）无法从控制器工作

Question

I have a gridview with a button in it. When the button is clicked, it calls a method from the controller. In that method, I'm trying to show a loading screen, then do some things, then hide the loading screen. Like so:

Ext.getCmp('center-panel').setLoading(true);        
// do something that takes a couple seconds
Ext.getCmp('center-panel').setLoading(false);

But the setLoading(true) does not kick in until after the method has finished running. If I comment out the setLoading(false), the loading screen will show itself, just not until after the 2 seconds, and then never go away.

Anybody know if this is possible or I'm doing something fundamentally wrong? The center-panel is defined in my Viewport like this:

Ext.define('HelperBatchForm.view.Viewport', {
extend: 'Ext.container.Viewport',    
layout: 'fit',
items: [
    {
        region: 'center',
        id: 'center-panel',
        title: 'Batches',
        split: true,
        collapsible: true,
        xtype: 'batchgrid'
    }
    ,
    {
        region: 'south',
        id: 'south-panel',
        title: 'Batch Form',
        split: true, 
        //collapsible: true,            
        xtype: 'batchedit'            
    }
],

initComponent: function () {
    this.callParent(arguments);
}

});

Thanks!

Answer 1

gotta use a '#' for ids:

 
 
 
  
  Ext.getCmp('#center-panel').setLoading(true);
 
  

Anyways, you don't want to call setLoading(false) right after your "something that takes a couple seconds", as it will get fired too soon.

You want to pass a callback function into whatever takes a few seconds and then call setLoading(false) from there.

Example:

somePanel.setLoading(true);

someStore.load({

  callback:function(){

    somePanel.setLoading(false);

  }
}); 

Answer 2

I had the same problem and solved it by calling the setLoading(true) in a 'beforeload' listener of the store and the setLoading(false) in a load callback. That works perfectly.

Here is an example from a view controller's perspective:

configureStore: function(store) {
    var me = this;
    store.on('beforeload', me.onStoreBeforeLoad, me);
    store.load({
        callback:function() {
            me.getView().setLoading(false);
        }
    });
},

onBeforeStoreLoad: function(store, operation, eOpts) {
    this.getView().setLoading(true);
}

Answer 3

You need show the panel/whatever before loading will work. Eg:

        var pnl = Ext.create('my.WhateverPanel');
        pnl.show();
        pnl.setLoading(true);
        setTimeout(function (){
            pnl.setLoading(false);
        }
        ,3000);

Answer 4

So I couldn't find a perfect solution, but what I found out was a good workaround was

Ext.getCmp('center-panel').setLoading(true); 
Ext.Function.defer(function () {
    // do something that takes a couple of seconds in here
    Ext.getCmp('center-panel').setLoading(false);
}, 10);

Answer 5

this.getView().setLoading('Loading module...');
setTimeout(function () {
//process what you want to do next. For example: me.setCurrentView(id);
} , 1);