在 ExtJS 4 中的服务器调用后取消 store.remove答案

【问题标题】：Cancel store.remove after server call in ExtJS 4在 ExtJS 4 中的服务器调用后取消 store.remove
【发布时间】：2011-12-13 19:35:32
【问题描述】：

我正在使用 ExtJS 4 并且有一个带有 ajax 代理和 api 的 Ext.data.Store：

var gridStore = Ext.create('Ext.data.Store', {
    autoSync: true,
    proxy: {
        type: 'ajax',
        api: {
            read: 'myurl',
            create: 'myurl',
            update: 'myurl',
            destroy: 'myurl'
        },
        reader: {
             type: 'json',
             successProperty: 'success',
             root: 'data',
             messageProperty: 'message'
        },
        writer: {
             type: 'json',
             writeAllFields: false,
             root: 'data'
        },
        listeners: {
             exception: function(proxy, response, operation){
                 Ext.MessageBox.show({
                     title: 'Server error',
                     msg: operation.getError(),
                     icon: Ext.MessageBox.ERROR,
                     buttons: Ext.Msg.OK
                 });
             }
        }
    ...

当我使用更新函数并且我的服务器返回一个带有 success:false 的 json 对象（因为他输入了错误的内容）时，我的关联网格中的字段仍然标记为已更改，并且用户可以选择更改他的错误值。

效果很好。

但是当我从商店中删除一条记录时...

var store = Ext.StoreManager.lookup('gridStore');
store.remove(store.getById(id));

...然后 ExtJS 先从 store 中删除这条记录，然后调用 ajax api。因此，当销毁 api 返回success:false 时，消息显示为异常，就像在更新 api 中一样，这很好，但我的记录已从商店中删除！例如，服务器的异常表示您无法删除此记录，但它已在商店中删除。

服务器同步后如何取消商店移除？如果服务器返回success:false，我希望记录保留在存储中。

有什么想法吗？也许是一个错误？

更新解决方案

根据 Ryan 的回答，我将异常监听器修改如下，效果很好：

 listeners: {
     exception: function(proxy, response, operation){
         Ext.MessageBox.show(...);
         // get the removed records and insert them where they have been
         var removedRecords = gridStore.getRemovedRecords();
         for(var i=0; i<removedRecords.length; i++){
             var record = removedRecords[i];
             gridStore.insert(record.index, record);
         }
     }
 }

【问题讨论】：

可能是个bug，或者需要深入源码看看会发生什么。唔。有趣的问题。以前看过这个，但我通过重新加载商店来克服这个问题。效率低，但适合小数据。
不错 :) 但是您忘记添加 gridStore.removed = [] 否则如果您再次删除该项目，您将有重复项（那么它仍然在删除的数组中）

标签： extjs

【解决方案1】：

插入技术对我不起作用，已删除的记录在下一次同步操作时仍标记为要删除。为此，我使用Ext.data.Store.rejectChanges()。

【讨论】：

这不是默认方法吗？你用this implementation了吗？
ExtJS 4.1.1a 中存在该方法。不确定 4.0 或两者之间的版本。这应该是正确的答案。

【解决方案2】：

只是扩展您提供的代码，特别是 listeners 区域：

    listeners: {
         exception: function(proxy, response, operation){
             Ext.MessageBox.show({
                 title: 'Server error',
                 msg: operation.getError(),
                 icon: Ext.MessageBox.ERROR,
                 buttons: Ext.Msg.OK
             });
             gridStore.add(gridStore.getRemovedRecords());
         }
    }

【讨论】：

非常感谢，这是正确的方法。我稍微改变了你的解决方案，看看我更新的问题，因为如果你只是添加记录，它们会被添加到列表的末尾，但它们应该保持原来的位置。

【解决方案3】：

我在同步时使用回调函数“成功”、“失败”或“回调”。希望这个方法可以帮到你。

store.remove(records);
store.sync({ 
    success: function (proxy, operations) {
        // pop success message
    }, failure: function (proxy, operations) {
        // resume records
        store.rejectChanges();
    }
});

【讨论】：

【解决方案4】：

我正在使用 model.destroy，这是我用于从网格中删除单数条目的方法：

                text : 'Delete',
                itemId : 'delete',
                scope : this,
                handler : function() {
                    var selection = grid.getView().getSelectionModel().getSelection()[0];
                    if(selection) {
                        selection.destroy({
                            failure : function() {
                                console.log('Record could not be deleted.');
                            },
                            success : function() {
                                store.remove(selection);
                                console.log('Record successfuly removed.');
                            },

                        });
                    }
                }

【讨论】：

不错。仅适用于单条记录。