extjs - 将编辑的记录保存在单元格编辑网格中

Question

如何在单击保存按钮时保存已编辑的记录？

我的代码：

// create the Data Store
var store = Ext.create('Ext.data.Store', {
    //autoSync: true,
    autoLoad:true,
    autoDestroy: true,
    url: 'update_premise.php',
    model: 'Plant',
    proxy: {
        type: 'ajax',
        // load remote data using HTTP
        url: 'getLab.php',
        // specify a XmlReader (coincides with the XML format of the returned data)
        reader: {
            type: 'json'
        },
          writer: {
            type: 'json'

        }
    },
    sorters: [{
        property: 'lab_name',
        direction:'ASC'
    }]
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});

// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        id: 'lab_name',
        header: 'Common Name',
        dataIndex: 'lab_name',
        flex: 1,
        editor: {
            allowBlank: false
        }
    }],
    selModel: {
        selType: 'cellmodel'
    },
    renderTo: 'editor-grid',
    width: 600,
    height: 300,
    title: 'Lab?',
    frame: true,
    tbar: [
     {
         text: 'Save',
         handler: function ()
         {
               for (var i = 0; i <grid.store.data.items.length; i++) {
                 var record = grid.store.data.items [i];
                 if (record.dirty) {
                 }
             }
         }
     }
     ],
    plugins: [cellEditing]
});

Answer 1

您不需要通过 ajax 调用保存 sencha 会为您完成所有检查和保存。

 for (var i = 0; i <grid.store.data.items.length; i++) {
        var record = grid.store.data.items [i];
        if (record.dirty) {
            ...
        }
 }

这部分可以替换为store.sync();

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.AbstractStore-method-sync

如果您想发送数据以更新到另一个 url，然后阅读您可以使用 api 对象配置您的代理，而不是单个 url 参数。

proxy: {
    type: 'ajax',
    api: {
        read    : 'getLab.php',
        create  : 'setLab.php',
        update  : 'setLab.php',
        destroy : 'deleteLab.php'
    }
    reader: {
        type: 'json'
    },
    writer: {
        type: 'json'

    }
}

Answer 2

基本上它取决于您的服务器端。如果你想通过 ajax 请求保存，你应该使用这样的东西：

Ext.Ajax.request({
    url: '/Some/Save',
    method: 'POST',
    params: {
        'RecordId': record.get('Id'),
        'RecordValue': record.get('Value')
    }
})

您应该在if语句中使用上面的代码：

if (record.dirty) {
    //Save code
}

您也可以将所有行合并到一个大对象中并在请求中使用它。

至于单元格编辑器插件，它旨在自动保存记录。您应该使用该validateedit事件。文档在这里：http ://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.CellEditing-event-validateedit