Question

过去4天我因为这个问题而拉我的头发。如果我尝试立即更新商店内的多个商品，我会得到奇怪的有效载荷。奇怪的是什么意思：第一个请求包含第一个项目的数据，第一和第二，第一，第二和第三等等。

如果我关闭batchActions，我会在商店收到55件10件商品的请求 当我正在编辑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>

任何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);
?>

200 OK是REST服务中PUT操作的正确标头，因此服务器不是问题我可以删除batchActions，但这样我就会收到不需要的请求，如果我设置batchActions，我将获得不需要的有效负载。

对此有何建议？

这是我的测试页面：这是我的测试页面：http://tomasz.jagusz.pl/masterthesis/test/

修改
为了测试其他PUT响应，我编辑了ExtJS 4.2.1附带的原始示例 - restfull示例我在代码工具栏中添加了以下代码：

{
    itemId: 'updateAll',
    text: 'Update All',
    handler: function(){
        Ext.each(grid.store.getRange(), function (rec, index) {
            rec.set('last', 'Test');
        }, this);
    }
}

这允许我一次更新所有记录。

对于这样的请求：

{"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"}}

这应该没问题，但对于6条记录，我收到了21个请求！

这是我的另一个测试：http://tomasz.jagusz.pl/masterthesis/test2/restful.html

编辑2

这是现在适合我的版本：

{
    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();
    }
}

我正在停止自动同步，然后我在本地进行更改，恢复自动同步并最终同步所有更改。

Answer 1

这就是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()

批量编辑 - 不需要的请求或有效负载

1 个答案: