Javascript 批量编辑-不需要的请求或负载
在过去的4天里，我一直在为这个问题发愁。 若我试图一次更新商店里的多个物品，我会得到奇怪的有效载荷。 我说的怪异是什么意思： 第一个请求包含第一项的数据， 二对一,二对二,， 第三种是第一种、第二种和第三种，依此类推 如果我关闭batchActions，我会收到55个请求，要求在我的商店购买10件商品。Javascript 批量编辑-不需要的请求或负载,javascript,extjs,extjs4,extjs4.2,Javascript,Extjs,Extjs4,Extjs4.2,在过去的4天里，我一直在为这个问题发愁。 若我试图一次更新商店里的多个物品，我会得到奇怪的有效载荷。 我说的怪异是什么意思： 第一个请求包含第一项的数据， 二对一,二对二,， 第三种是第一种、第二种和第三种，依此类推 如果我关闭batchActions，我会收到55个请求，要求在我的商店购买10件商品。 当我编辑30个项目时，我收到465个请求 这是我的密码： <!DOCTYPE HTML> <html> <head> <meta http-eq
当我编辑30个项目时，我收到465个请求 这是我的密码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="extjs/ext-all-debug-w-comments.js" type="text/javascript"></script>
<title>Test</title>
<script type="text/javascript">
//MODEL
Ext.define('Test.model.Shift', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'StartDate',
type: 'date',
dateFormat: 'Y-m-d'
}, {
name: 'EndDate',
type: 'date',
dateFormat: 'Y-m-d'
}, {
name: 'Cls',
type: 'string'
}, {
name: 'Draggable',
type: 'bool',
defaultValue: true
}, {
name: 'Resizable',
type: 'bool',
defaultValue: true
}]
});
//STORE
Ext.define('Test.store.Shifts', {
extend: 'Ext.data.Store',
model: 'Test.model.Shift',
autoLoad: true,
autoSync: true,//I need this!!!
proxy: {
type: 'rest',
//batchActions: true,
pageParam: false,
startParam: false,
limitParam: false,
noCache: false,
url: 'json.php',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
update: function (store, record, operation, eOpts) {
switch (operation) {
case Ext.data.Model.EDIT:
console.log('INFO', 'Updating record...');
break;
case Ext.data.Model.COMMIT:
console.log('INFO', 'Record was updated!');
break;
case Ext.data.Model.REJECT:
console.log('ERR', 'Something went horribly wrong :( Data was rejected!');
break;
}
},
beforesync: function (options, eOpts) {
console.log(options);
}
}
});
//SCHEDULER
Ext.define("Test.view.Scheduler", {
extend: "Ext.grid.Panel",
alias: 'widget.my_scheduler',
title: 'Scheduler',
region: 'center',
split: true,
initComponent: function () {
var me = this;
me.store = Ext.create("Test.store.Shifts");
Ext.apply(me, {
columns: [{
text: 'Id',
dataIndex: 'id',
hideable: false,
width: 260,
sortable: true,
resizable: false
}, {
text: 'Cls',
dataIndex: 'Cls',
hideable: false,
flex: 1,
sortable: true,
resizable: false
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Update',
listeners: {
click: function () {
var mixed = me.store.queryBy(function (rec) {
if (rec.data.Cls === 'cls') return true;
});
Ext.each(mixed.getRange(), function (rec, index) {
rec.set('Cls', 'cls2');
}, this);
},
scope: this
}
}]
}],
});
this.callParent(arguments);
}
});
//APP
Ext.application({
name: "Test",
launch: function () {
this.setupLayout();
},
setupLayout: function () {
Ext.create('Ext.Viewport', {
layout: 'border',
margins: 5,
items: [{
xtype: 'panel',
region: 'north',
html: 'test'
}, {
xtype: 'my_scheduler'
}]
});
}
});
</script>
</head>
<body>
</body>
</html>
{"id":1,"email":"fred@flintstone.com","first":"Fred","last":"Test"}
{"success":true,"message":"Updated User 1","data":{"id":1,"first":"Fred","last":"Test","email":"fred@flintstone.com"}}
{
itemId: 'updateAll',
text: 'Update All',
handler: function(){
grid.store.suspendAutoSync();
Ext.each(grid.store.getRange(), function (rec, index) {
rec.set('last', 'Test'+ Math.floor(Math.random() * 100) );
}, this);
grid.store.resumeAutoSync();
grid.store.sync();
}
}
我停止自动同步，然后在本地进行更改，恢复自动同步，最后同步所有更改。ExtJS就是这样更新数据的：
- 如果记录已正确更新，它将从队列中丢弃更新操作
- 如果记录更新失败，它会将更新操作保留在队列中，并在下次重新发送
ClsClscls2{"id":7,"StartDate":"2013-01-06","EndDate":"2013-01-08","Cls":"cls2","Draggable":true,"Resizable":true}
{"success":true,"data":[{"id":7,"StartDate":"2013-01-06","EndDate":"2013-01-08","Cls":"cls2","Draggable":true,"Resizable":true}]}
但在您的情况下，它返回所有没有更新的行，这与
“Cls”：“Cls”success:truestore.sync（）上重新发送更新操作的原因这就是ExtJS更新数据的方式：
它发送带有json数据的请求
它解析响应。
- 如果记录已正确更新，它将从队列中丢弃更新操作
- 如果记录更新失败，它会将更新操作保留在队列中，并在下次重新发送
重新发送每个请求的原因是服务器的响应不正确。当将Cls
从Cls
更新到cls2
时，您将其发送到服务器：
{"id":7,"StartDate":"2013-01-06","EndDate":"2013-01-08","Cls":"cls2","Draggable":true,"Resizable":true}
服务器应以
{"success":true,"data":[{"id":7,"StartDate":"2013-01-06","EndDate":"2013-01-08","Cls":"cls2","Draggable":true,"Resizable":true}]}
但在您的情况下，它返回所有没有更新的行，这与“Cls”：“Cls”
不正确。这告诉ExtJS，更新没有成功，即使您发送了success:true
。这就是为什么ExtJS将在每个store.sync（）
上重新发送更新操作的原因。我测试了相同的代码，但我的后端返回状态200 OK，这是正确的PUT响应（RFC2616）。所以，即使当我的服务器没有返回任何内容和那个标题时，我仍然收到那个些请求。我将修改我的代码，看看这是否会改变什么。但是我认为200 OK
（没有数据）应该可以。想象一下，我正在一次更新商店里的300件物品。这需要发送大量数据，但也需要接收（当服务器需要返回数据时）看，仅状态代码是不够的。ExtJs需要一个success
参数和更新记录的新内容。感谢澄清，我过去一次更新一个项目，一切都很顺利，但我必须说我没有计算请求。我将立即修改我的测试代码：）请查看我更新的问题。我编辑了ExtJS 4.2.1附带的restful示例，我得到了相同的结果。手动更新现在对我有效。只有您的按钮“全部更新”.sync（）200 OKsuccess