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

Question

Dear fellow EXT enthusiasts,
I'm working on a project where I need an admin panel to edit job functions.
The grid is communicating to a MySQL database using Ext.Direct. It loads the data fine.
The grid shows the id and the function name
I added a RowEditing plugin to my grid for editting the function settings.
The problem is, when I try to commit the changes I get a tiny red triangle in the upper left corner of the grid without any error code in the console. The changes don't commit to the MySQL database.
The way my program works and loads the data:
This is my 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,
}
},
});
In the controller: when the admin panel is rendered, the store gets loaded with the following function:
loadStore: function()
{
functionStore.load();
}
This is the grid where the functions are displayed:
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();
}
}
});
}
}]
}]
});
As u can see I added a listener to the edit event of the RowEditing plugin, this displays the array of the edited record in console like it should.
4. And finally, this is the PHP code that updates the database:
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. The weird part: once I've added one job function, I can edit all the other functions and those changes are committed to the database...
As a side note: I'm just a beginner in EXT, trying to learn it on my own, but I have been breaking my head on this issue for the last few days so I decided to ask you guys.
Thanks for your answers in advance!

Answer 1

I left the bug for what it was for a few weeks and started to look into it again this week.
I found a work around solution.
I've added the following code to my controller that controls the grids:
functionGrid.on('edit', function(editor, e)
{
e.store.sync();
});
Now when I update a record, the tiny red triangle still appears but after the e.store.sync() function is completed it disappears and the database table is updated.
Not a 100% clean solution, but it does the trick
If anyone has a better solution, please let me know