1

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

单击网格行时，我创建一个详细信息窗口小部件的新实例，获取它的视图模型，并创建一个链接。创建此链接后，我将显示窗口：

...
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 方法调用中引用的模型类有一个 rest 代理配置，所以当 linkTo 被触发时，会对数据发出 GET 请求：

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

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

现在，窗口出现，延迟一两秒，然后在返回 GET 请求的结果后出现数据。

我希望能够显示被屏蔽的窗口，然后在数据加载后取消屏蔽它。我知道我可以.mask()在显示窗口后使用该方法：

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

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

我该怎么做？我接近它错了吗？

更新：修复

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

  • 立即显示和屏蔽窗口
  • 直接从模型加载记录
  • 在加载方法的成功回调中
    • 将返回的数据设置到 ViewModel 中
    • 取消屏蔽窗口

这是更新的方法：

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...');
}
4

1 回答 1

1

尝试创建自己的绑定：

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

当绑定值（sessiondetails值）发生变化时，绑定将调用提供的函数。这应该在加载记录时调用。

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

回退是让您显式加载模型，然后将值绑定到视图模型并删除掩码作为加载模型的成功响应的一部分。

于 2015-09-10T22:19:50.103 回答