アプリのグリッドがアイテムクリックされたときに起動するメソッドがコントローラーにあります。
グリッド行がクリックされると、詳細ウィンドウ ウィジェットの新しいインスタンスを作成し、そのビューモデルを取得して、リンクを作成します。このリンクが作成された後、ウィンドウを表示します。
...
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 メソッド呼び出しで参照されるモデル クラスにはレスト プロキシ構成があるため、linkTo が起動されると、データに対して GET 要求が行われます。
Ext.define('Registration.model.SessionDetails', {
extend: 'Ext.data.Model',
fields: [
...
],
proxy:{
type: 'rest',
url: 'sessions',
reader: {
type: 'json',
rootProperty: 'record'
}
}
});
これはすべてうまくいきます。私が理解しようとしているのは、レコードが実際に読み込まれるまで、ウィンドウ ウィジェットを非表示にするか、少なくともマスクする方法です。
現在、ウィンドウが表示され、1 ～ 2 秒の遅延があり、GET 要求の結果が返されるとデータが表示されます。
ウィンドウをマスクして表示し、データがロードされたらマスクを解除できるようにしたいと考えています。.mask()ウィンドウを表示した後にメソッドを使用できることはわかっています。
...
detailsWindow.show();
detailsWindow.mask('Loading...');
しかし、ViewModel がレコードの読み込みを完了した後にマスクを削除する方法がわかりません。
どうすればいいですか？私はそれに間違って近づいていますか？
更新: 修正
Robert Watkins による回答の 2 番目のオプションに基づいて、コードを次のようにリファクタリングしました。
- ウィンドウをすぐに表示してマスクする
- モデルからレコードを直接ロードする
- load メソッドの成功コールバック内
- 返されたデータを 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...');
}