extjs setLoading()无法从控制器运行

时间:2013-06-20 20:28:32

标签: javascript model-view-controller extjs

我有一个带有按钮的gridview。单击该按钮时,它将从控制器调用方法。在那个方法中,我试图显示一个加载屏幕,然后做一些事情,然后隐藏加载屏幕。像这样:

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

但是setLoading(true)直到方法运行完毕后才会启动。如果我注释掉setLoading(false),加载屏幕将自动显示,直到2秒之后,然后永远不会消失。

有人知道这是否可能,或者我做了一些根本错误的事情?中心面板在我的视口中定义如下:

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);
}

});

谢谢!

5 个答案:

答案 0 :(得分:0)

必须使用'#'表示ids:

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

<击>

无论如何,你不想在你的“需要几秒钟的事情”之后立即调用setLoading(false),因为它会很快被解雇。

您希望将回调函数传递到几秒钟内,然后从那里调用setLoading(false)。

示例:

somePanel.setLoading(true);

someStore.load({

  callback:function(){

    somePanel.setLoading(false);

  }
}); 

答案 1 :(得分:0)

我遇到了同样的问题,并通过在存储的'beforeload'监听器中调用setLoading(true)并在加载回调中调用setLoading(false)来解决它。这非常有效。

以下是视图控制器的一个示例:

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);
}

答案 2 :(得分:0)

您需要在加载前显示面板/其他内容。 E.g:

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

答案 3 :(得分:0)

所以我找不到一个完美的解决方案,但我发现的是一个很好的解决方法

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);

答案 4 :(得分:-1)

this.getView()。setLoading('Loading module ...');
setTimeout(function(){
    //处理下一步要做的事情。例如:me.setCurrentView(id);
},1);