javascript 如何等到所有商店都在 ExtJs 中同步？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52343862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wait until all stores are Sync in ExtJs?
提问by Hossein
I have a list of grids that can change their data in form by end-user. Finally, I want to sync all the grids by clicking the button, then an operation is performed.
我有一个网格列表，可以由最终用户更改其数据形式。最后，我想通过单击按钮同步所有网格，然后执行一个操作。
I wrote the code below:
我写了下面的代码：
$.when.apply(
Ext.ComponentQuery.query('grid')
.forEach(function(item) {
if (item.getXType() == "grid") {
if (item.store.getNewRecords().length > 0 || item.store.getUpdatedRecords().length > 0 || item.store.getRemovedRecords().length > 0) {
item.store.sync();
}
}
})).then(function (results) {
//do something
});
Problem is here that store.sync()not waiting for callback.
问题是store.sync()不等待回调。
What is the recommended way of doing this?
这样做的推荐方法是什么？
采纳答案by Hossein
I do it with Promiselike this:
我这样做Promise：
// Sync grid data if exist dirty data
Promise.all(
Ext.ComponentQuery.query('grid')
.map(grid => grid.getStore())
.filter(s => (s.getNewRecords().length + s.getUpdatedRecords().length + s.getRemovedRecords().length) > 0)
.map(s => new Promise((resolve, reject) => {
s.sync({
success: () => { resolve(); },
failure: () => { reject(); }
});
}))
).then(() => {
//do something
});
回答by Narendra Jadhav
You could use callbackfor your store.sync()method.
你可以使用callback你的store.sync()方法。
The callbackfunction to be called upon completion of the sync. The callback is called regardless of success or failure and is passed the following parameters: (batch, options).
同步完成后调用的回调函数。无论成功或失败都会调用回调，并传递以下参数：（批处理，选项）。
You could achieve your requirement like this
你可以像这样实现你的要求
Take a blank array name before loop. like this
var gridIds=[].In side of loop before
store.sync()push grid id in above array.Now in
callbackfunction remove that grid id from above array and check condition array is blank then your all store sync response has came.
在循环之前取一个空白数组名称。像这样
var gridIds=[]。在
store.sync()上面的数组中推送网格 id之前的循环侧。现在在
callback函数中从数组上方删除该网格 id 并检查条件数组是否为空，然后您的所有存储同步响应已经到来。
You can check here with working Fiddle
你可以在这里查看工作小提琴
NoteI have used dummy api. Please use your actual api.
注意我使用了虚拟 api。请使用您的实际 api。
CODE SNIPPET
代码片段
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyStore', {
extend: 'Ext.data.Store',
alias: 'store.mystore',
fields: ['name'],
autoLoad: true,
pageSize: 25,
remoteSort: true,
proxy: {
type: 'ajax',
method: 'POST',
api: {
read: 'data.json',
update: 'your_update_api',
create: 'your_create_api',
destroy: 'your_delete_api'
},
reader: {
type: 'json'
},
writer: {
type: 'json',
encode: true,
root: 'data'
}
},
});
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
store: {
type: 'mystore'
},
height: 200,
border: true,
tools: [{
xtype: 'button',
iconCls: 'fa fa-plus-circle',
tooltip: 'Add New Record',
handler: function () {
let grid = this.up('grid'),
store = grid.getStore();
store.insert(0, {
name: 'Test ' + (store.getCount() + 1)
});
}
}],
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}]
});
Ext.create({
xtype: 'panel',
// title: 'Store sync example',
items: [{
xtype: 'mygrid',
title: 'Grid 1'
}, {
xtype: 'mygrid',
title: 'Grid 2'
}, {
xtype: 'mygrid',
title: 'Grid 3'
}, {
xtype: 'mygrid',
title: 'Grid 4'
}],
bbar: ['->', {
text: 'Submit Changes',
handler: function (btn) {
var panel = btn.up('panel'),
grids = panel.query('grid'),
gtidIds = [],
lenthCheck = function (arr) {
return arr.length > 0;
};
grids.forEach(function (grid) {
let store = grid.getStore();
if (lenthCheck(store.getNewRecords()) || lenthCheck(store.getUpdatedRecords()) || lenthCheck(store.getRemovedRecords())) {
panel.mask('Please wait...');
gtidIds.push(grid.getId());
store.sync({
callback: function () {
Ext.Array.remove(gtidIds, grid.getId());
if (gtidIds.length == 0) {
panel.unmask();
Ext.Msg.alert('Info', 'All grid store sync success.');
}
}
}, grid);
}
});
}
}],
renderTo: Ext.getBody(),
})
}
});
