Lately, I've been extremely frustrated with an issue I've encountered over the past 4 days. When attempting to update multiple items within my store simultaneously, I'm experiencing a strange payload behavior. To elaborate on what I mean by "weird": the first request contains data for the first item, the second request includes data for the first and second items, and this pattern continues as more items are updated.
Disabling batchActions results in 55 requests for 10 items in my store. The problem escalates when editing 30 items, leading to a staggering 465 requests!
Below is the code snippet:
<!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);
}
}
});
...
For any advice or suggestions on how to tackle this issue would be greatly appreciated. You can access my test page here:
EDIT:
To test another PUT response, I made modifications to the original example provided with ExtJS 4.2.1 - restfull example. I added the following code to the toolbar:
{
itemId: 'updateAll',
text: 'Update All',
handler: function(){
Ext.each(grid.store.getRange(), function (rec, index) {
rec.set('last', 'Test');
}, this);
}
}
This functionality allows me to update all records at once. However, even for just 6 records, I observe 21 requests being sent. You can view this additional test here:
EDIT 2
I have now implemented a version that works better for me:
{
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();
}
}
This process involves halting autosync, making local changes, then resuming autosync before syncing all the changes.