extjs setLoading() 不能从控制器工作答案

【问题标题】：extjs setLoading() not working from controllerextjs setLoading() 不能从控制器工作
【发布时间】：2013-06-20 20:28:32
【问题描述】：

我有一个带有按钮的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);
}

});

谢谢！

【问题讨论】：

标签： javascript model-view-controller extjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

~~ID 必须使用“#”：~~

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

无论如何，您不想在“需要几秒钟的时间”之后立即调用 setLoading(false)，因为它会很快被触发。

您想将回调函数传递给需要几秒钟的时间，然后从那里调用 setLoading(false)。

例子：

somePanel.setLoading(true);

someStore.load({

  callback:function(){

    somePanel.setLoading(false);

  }
});

【讨论】：

无论出于何种原因，Ext.getCmp('center-panel') 都会返回面板。 setLoading 实际上确实打开了加载掩码，它只是在函数调用完成后才显示（仅当我注释掉关闭它的代码时）。 Ext.getCmp('#center-panel') 返回未定义。
我相信 setLoading(false) 调用太快也不是问题。如果我删除 setLoading(false)，会发生 2 秒延迟，然后我们会看到“正在加载...”屏幕。谢谢。
你解决过这个问题吗？我遇到了同样的问题，代码似乎首先执行，然后 setLoading(true) 发生，即使我将它按顺序放置在代码之前

【解决方案3】：

我遇到了同样的问题，并通过在 store 的“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);
}

【讨论】：

【解决方案4】：

您需要在加载之前显示面板/任何内容。例如：

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

【讨论】：

【解决方案5】：

this.getView().setLoading('正在加载模块...');
设置超时（函数（）{
//处理你接下来要做的事情。例如：me.setCurrentView(id);
} , 1);

【讨论】：