1

在过去的 4 天里，我一直在拉头发，因为我遇到了这个问题。如果我尝试一次更新商店内的多个项目，我会得到奇怪的有效负载。我说的奇怪是什么意思：第一个请求有第一个项目的数据，第二个是第一个和第二个，第三个是第一个，第二个和第三个等等。

如果我关闭 batchActions，我会在我的商店中收到 10 件商品的 55 个请求。
当我编辑 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();
    }
}

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

4

1 回答 1

1

这是 ExtJS 更新数据的方式：

  1. 它使用 json 数据发送请求
  2. 它解析响应。
    • 如果记录被正确更新，它会从队列中丢弃更新操作。
    • 如果记录更新失败，则将更新操作保留在队列中，并在下次重新发送。

您收到每个请求的重新发送的原因是您从服务器获得的响应不正确。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()

于 2013-10-25T07:29:43.893 回答