仅在加载其视图模型的数据后显示组件

Question

我的控制器上有一个方法，当我的应用程序中的网格被点击时会触发。

单击网格行时，我创建了一个详细信息 window 小部件的新实例，获取它的视图模型，并创建了一个 link。创建 link 后，我显示 window:

...
itemClicked: function (item, record, index, event, eOpts){

    var detailsWindow = Ext.widget('sessiondetails'),
        viewmodel = detailsWindow.getViewModel();


    viewmodel.linkTo('sessiondetails', {
        reference: 'Registration.model.SessionDetails',
        id: record.id
    });
    detailsWindow.show();
}
...

linkTo 方法调用中引用的模型 class 有一个 rest 代理配置，因此当触发 linkTo 时，会为数据：

Ext.define('Registration.model.SessionDetails', {
    extend: 'Ext.data.Model',
    fields: [
        ...
    ],
    proxy:{
        type: 'rest',
        url: 'sessions',
        reader: {
            type: 'json',
            rootProperty: 'record'
        }
    }
});

这一切都很好。我想弄清楚的是如何隐藏或至少屏蔽 window 小部件，直到记录实际加载。

现在出现window，有一两秒的延迟，等GET请求结果返回后数据出现。

我希望能够显示 window 屏蔽，然后在数据加载后取消屏蔽。我知道我可以在显示 window:

后使用 .mask() 方法

...
detailsWindow.show();
detailsWindow.mask('Loading...');

但我不知道如何在 ViewModel 完成记录加载后删除遮罩。

我该怎么做？我是不是走错了？

更新：修复

根据 Robert Watkins 回答中的第二个选项，我将代码重构为：

立即显示并屏蔽 window
直接从模型加载记录
在加载方法的成功回调中
- 将返回的数据设置到ViewModel中
- 揭开window

这是更新后的方法：

itemClicked: function (item, record, index, event, eOpts){

    // create the window
    var detailsWindow = Ext.widget('sessiondetails');

    // Get an instance of the model class
    var model = Registration.model.SessionDetails;

    // manually load the record
    // Note that this would be the same as firing
    // Registraton.model.SessionDetails.load(...), 
    // I just think it reads better this way
    model.load(record.id, {

        // Make sure you include the `scope: this` config, 
        // otherwise you won't have access to the 
        // previously defined `detailswindow` variable
        scope: this,
        success: function (session){
            var viewmodel = detailsWindow.getViewModel();
            viewmodel.setData(session.getData());

            // Since this callback fires after the data is returned,
            // placing the unmask here makes sure the data is loaded first.
            detailsWindow.unmask();

        }
    });

    // Show and mask the window
    detailsWindow.show();
    detailsWindow.mask('Loading...');
}

Answer 1

尝试创建您自己的绑定：

this.maskBinding = this.getViewModel().bind({ bindTo: 'sessiondetails', single: true, }, function() { detailsWindow.unmask(); })

绑定将在绑定值（sessiondetails 值）更改时调用提供的函数。这应该在加载记录时调用。

（注意：我还没有尝试过这种特殊的方法，但我之前使用过绑定来检测值的变化）。

后备方法是显式加载模型，然后将值绑定到视图模型并移除掩码作为加载模型成功响应的一部分。

仅在加载其视图模型的数据后显示组件

Showing a component only after the data for it's viewmodel has loaded

javascript

extjs

extjs5

extjs6

更新：修复