php - EXTJS 4 : Editable grid doesn't commit changes to MySQL Database

Question

亲爱的 EXT 爱好者们，

我正在做一个项目，我需要一个管理面板来编辑工作职能。网格使用 Ext.Direct 与 MySQL 数据库通信。它可以很好地加载数据。网格显示id和函数名

我在我的网格中添加了一个 RowEditing 插件，用于编辑功能设置。问题是，当我尝试提交更改时，我在网格的左上角看到一个红色的小三角形，控制台中没有任何错误代码。更改不会提交到 MySQL 数据库。

我的程序工作和加载数据的方式:

1. 这是我的函数库:

   Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);  
   
   Ext.define("MCS.store.FunctionStore", 
   {
       extend: "Ext.data.Store",
       requires: "MCS.model.Functions",
       model: "MCS.model.Functions",
       id: "FunctionStore",
   
       proxy: 
       {
           type: "direct",
           api: 
           {
               read: QueryDatabase.getFunctions,
               create: QueryDatabase.createFunction,
               update: QueryDatabase.updateFunction,
               destroy: QueryDatabase.removeFunction,
           }
       },
   });
   

2. 在 Controller 中:当管理面板呈现时，商店会加载以下函数:

   loadStore: function()
   {  
       functionStore.load();  
   }  
   

3. 这是显示函数的网格:

   var rowEditingFunctions = Ext.create("Ext.grid.plugin.RowEditing", 
   {  
       clicksToMoveEditor: 1,
       autoCancel: false,
       listeners: {
           edit: function(editor,e,opt)
           {
               var grid = e.grid;
               var record = e.record;
               console.log(record.data.functionName);
               var editedrecords = grid.getStore().getUpdatedRecords();
               console.log(editedrecords);
           }
       }
   });
   
   var functionGrid = Ext.create("Ext.grid.Panel", 
   {
       height: 500,
       width: 800,
       store: functionStore,
       title:"List of Job Functions - double click to edit",
       columns: [
       {
           dataIndex: "id",
           width: 50,
           text: "ID"
       },{
           dataIndex: "functionName",
           flex: 1,
           text: "Function",
           field: 
           {
               type: "textfield",
               allowBlank: false
           }
       }],
       plugins: [
           rowEditingFunctions
       ],
       dockedItems: [
       {
           xtype: "toolbar",
           store: functionStore,
           dock: "bottom",
           items: [
           {
               iconCls: "add",
               text: "Add",
               handler: function() 
               {
                   rowEditingFunctions.cancelEdit();
                   var newRecord = Ext.create("App.model.Functions");
                   functionStore.insert(0, newRecord);
                   rowEditingFunctions.startEdit(0, 0);
                   var sm = functionGrid.getSelectionModel();
                   functionGrid.on("edit", function() {
                       var record = sm.getSelection()
                       functionStore.sync();
                       functionStore.remove(record);
                       functionStore.load();
                   });
               }
           }, {
               iconCls: "delete",
               text: "Delete",
               handler: function() 
               {
                   rowEditingFunctions.cancelEdit();
                   var sm = functionGrid.getSelectionModel();
                   Ext.Msg.show(
                   {
                        title:"Delete Record?",
                        msg: "You are deleting a function permanently, this cannot be undone. Proceed?",
                        buttons: Ext.Msg.YESNO,
                        icon: Ext.Msg.QUESTION,
                        fn: function(btn)
                        {
                           if(btn === "yes") 
                           {
                               functionStore.remove(sm.getSelection());
                               functionStore.sync();
                           }
                        }
                   });
               }
           }]
       }]
   });
   

如您所见，我在 RowEditing 插件的编辑事件中添加了一个监听器，这会像它应该的那样在控制台中显示已编辑记录的数组。
4. 最后，这是更新数据库的 PHP 代码:

    public function updateFunction(stdClass $params)
    {
        $db = $this->__construct();
        if ($stmt = $db->prepare("UPDATE functions SET functionName=? WHERE id=?")) 
        {
            $stmt->bind_param('si', $functionName, $id);
            $functionName = $params->functionName;
            $id = (int) $params->id;
            $stmt->execute();
            $stmt->close();
        }
        return $this;
    }

5.奇怪的部分:一旦我添加了一个工作功能，我就可以编辑所有其他功能，并且这些更改会提交到数据库...

附带说明:我只是 EXT 的初学者，试图自己学习它，但过去几天我一直在这个问题上伤脑筋，所以我决定问问你们。

提前感谢您的回答!

Answer 1

我将这个 bug 搁置了几个星期，并在本周再次开始研究它。我找到了解决方案。

我已将以下代码添加到控制网格的 Controller 中:

functionGrid.on('edit', function(editor, e) 
{
    e.store.sync();
});

现在当我更新一条记录时，小红色三角形仍然出现，但在 e.store.sync() 函数完成后它消失并且数据库表被更新。

不是 100% 干净的解决方案，但它可以解决问题

如果谁有更好的解决办法，请告诉我