EXTJS 4：可編輯網格不更改提交到MySQL數據庫

我工作的一個項目，我需要一個管理控制檯，以編輯工作職能。網格使用Ext.Direct與MySQL數據庫進行通信。它加載的數據很好。網格顯示的ID和函數名稱

我添加了一個RowEditing插件到我的網格編輯功能設置。問題是，當我嘗試提交更改時，我在網格左上角出現一個小紅色的三角形，控制檯中沒有任何錯誤代碼。這些更改不會提交給MySQL數據庫。

我的程序工作的方式和加載數據：

這是我functionStore：

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, 
     } 
    }, 
});

在控制器：當管理後臺渲染，商店被裝載以下功能：
```
loadStore: function() 
{ 
    functionStore.load(); 
} 
```

這是網格在哪裏顯示在功能：

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

正如u能看到我添加一個監聽到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一個初學者，試圖瞭解它在我自己的，但我一直在打破在這個問題上我的頭的最後幾天，所以我決定問你們。

感謝您的提前解答！

來源

2013-03-19 pieterjanvh

我有一個類似的問題，這個帖子我節省了很多時間。謝謝！ – 2013-07-15 17:28:09

我離開了幾周的bug，並在本週再次開始研究它。我找到了解決方案。

我已經添加以下代碼，以我的控制器，可以控制網格：

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

現在，當我更新記錄，微小的紅色三角形仍會出現，但e.store.sync後（）函數完成它消失，並更新數據庫表。

不是100％乾淨的解決方案，但它的伎倆

如果任何人有一個更好的解決方案，請讓我知道

來源

2013-04-18 09:51:54 pieterjanvh

EXTJS 4：可編輯網格不更改提交到MySQL數據庫

回答

相關問題