在单元格编辑网格中保存已编辑的记录

时间:2013-02-18 06:16:01

标签: extjs extjs4

如何在点击保存按钮时保存已编辑的记录?

enter image description here

我的代码:

// 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]
});

2 个答案:

答案 0 :(得分:2)

你不需要通过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'

    }
}

答案 1 :(得分:0)

基本上取决于您的服务器端。如果你想通过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