用extjs写一个grid表格数据修改后，后台数据也随之修改的完整例子

以下是一个完整的示例，用ExtJS 6.5编写，它演示了如何在Grid中编辑数据，并使用Ajax将更改保存到后端。

在这个例子中，我们将创建一个向后端服务器发送请求并接收响应的PHP脚本。它应该返回一个JSON编码的数组，我们将用来填充Grid数据。

PHP文件 fetchdata.php：

<?php

// 模拟从服务器获取数据
$data = array(
    array('id'=>1, 'name'=>'张三', 'age'=>26),
    array('id'=>2, 'name'=>'李四', 'age'=>32),
    array('id'=>3, 'name'=>'王五', 'age'=>45),
    array('id'=>4, 'name'=>'赵六', 'age'=>18),
    array('id'=>5, 'name'=>'钱七', 'age'=>40)
);

// 将数据返回为JSON格式
echo json_encode($data);

?>

下面是ExtJS代码，包括Grid和与服务器进行通信的Ajax请求：

Ext.onReady(function(){

    // 创建数据模型
    Ext.define('Person', {
        extend: 'Ext.data.Model',
        fields: [
            'id',
            'name',
            'age'
        ]
    });

    // 创建存储
    var store = Ext.create('Ext.data.Store', {
        model: 'Person',
        proxy: {
            type: 'ajax',
            url: 'fetchdata.php',
            reader: {
                type: 'json',
                rootProperty: ''
            }
        },
        autoLoad: true
    });

    // 创建列模型
    var columns = [
        { text: 'ID',  dataIndex: 'id' },
        { text: '姓名', dataIndex: 'name', editor: 'textfield' },
        { text: '年龄', dataIndex: 'age', editor: 'numberfield' }
    ];

    // 创建Grid
    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        store: store,
        columns: columns,
        selModel: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        listeners: {
            // 在单元格编辑后立即保存更改
            edit: function(editor, e){
                Ext.Ajax.request({
                    url: 'savechanges.php',
                    method: 'POST',
                    jsonData: e.record.data,
                    success: function(response, opts){
                        //console.log(response.responseText);
                        var obj = Ext.decode(response.responseText);
                        if(obj.success){
                            Ext.Msg.alert('成功', '数据已保存');
                            store.load();
                        } else {
                            Ext.Msg.alert('错误', obj.error);
                        }
                    },
                    failure: function(response, opts){
                        Ext.Msg.alert('错误', response.statusText);
                    }
                });
            }
        }
    });

});

注意：
- CellEditing 插件可在单元格编辑时自动保存更改。
- 在保存更改时，我们使用Ajax请求将数据发送到名为 savechanges.php 的PHP文件。
- 在保存请求成功时，我们刷新存储以便更新Grid中的数据。

下面是PHP文件savechanges.php，我们稍后将用它来保存更改：

<?php

// 获取POST数据
$data = json_decode(file_get_contents('php://input'));

// 将更改保存到数据库
// 这里是我们自己的代码，为了演示，我们只返回成功。
$response = array('success'=>true);

// 将响应数据转换为JSON格式并发送回来
echo json_encode($response);

?>

在本地web服务器上运行这些代码后，您应该会看到一个包含可编辑单元格的Grid。更改数据时，单元格的背景色将变为黄色，表示它们已更改但尚未保存。保存更改时，将出现保存状态或错误消息。

希望这个例子对你有所帮助！