PDA

View Full Version : Batch editing of store causes invalid request payload



Misiu
21 Oct 2013, 4:49 AM
Hi all,
For last 4 days I'm pulling my hair because of this issue I'm having.
If I try to update multiple items inside store at once I get weird payload.
What do I mean by weird:
first request has data for first item,
second for first and second,
third for first, second and third and so on.

If I turn off batchActions I get 55 requests for 10 items in my store.

Below is my code:



<!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>


and my json.php:


<?php
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');


$list = array();
for ($i = 1; $i <= 10; $i++) {
$list[] = array('id' => $i, 'UserId' => $i, 'StartDate' => '2013-01-06', 'EndDate' => '2013-01-08', 'Cls' => 'cls', 'Draggable' =>true, Resizable =>true);
}
$data = array('success'=>true, data=>$list);
echo json_encode($data);
?>


I think that every item that is updated should fire one request, and in case of batchAction it should be only one request.

Now when I'm editing 30 items I'm getting 465 requests!

I don't know if this is a bug, but I will be very grateful if someone could confirm this or fix my issue.
I'm using ExtJS 4.2.1.
Here is my test page: http://tomasz.jagusz.pl/masterthesis/test/

Misiu
21 Oct 2013, 12:36 PM
200 OK is proper header for PUT operation in REST service so server can't be the issue.
I can remove batchActions, but this way I'll have unwanted requests, if I set batchActions I'll get unwanted payload.

Any advice on this one?

Misiu
21 Oct 2013, 11:49 PM
Someone had the same issue?
How do You guys manage batch updates inside store?
I don't believe that only I'm struggling with batch editing.
Any advices on how to reduce number of requests are welcome.
Ideally I would like to have 1 request per store item being edited (preferred) or one request with payload that has all the changes.

Misiu
24 Oct 2013, 12:37 AM
bump

ettavolt
25 Oct 2013, 2:17 AM
autoSync sync all changed records everytime someone is changed. You can try suspendAutoSync and resumeAutoSync methods.

Misiu
25 Oct 2013, 2:28 AM
I asked the same question on stackoverflow: http://stackoverflow.com/questions/19525987/batch-editing-unwanted-requests-or-payload and suspend and resume autoSync was solution that I finnally managed to do.



{
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 works really nice, but at the end I don't know if this is a bug or this is correct behaviour by design.