Question

亲爱的EXT爱好者，

我正在开展一个项目，我需要一个管理面板来编辑工作职能。网格使用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();
                        }
                     }
                });
            }
        }]
    }]
});

正如你所看到的，我为RowEditing插件的edit事件添加了一个监听器，它会在控制台中显示已编辑记录的数组。 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

我把这个错误留了几个星期，并在本周开始再次调查。我找到了解决方案。

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

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

现在，当我更新记录时，仍然会出现一个微小的红色三角形，但在e.store.sync（）函数完成后，它会消失并更新数据库表。

不是100％清洁的解决方案，但它可以解决问题

如果有人有更好的解决方案，请告诉我

EXTJS 4：可编辑网格不会提交对MySQL数据库的更改

1 个答案: