2

亲爱的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. 在控制器中：渲染管理面板时，商店会加载以下函数：

    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的初学者，试图自学，但过去几天我一直在这个问题上打破头脑，所以我决定问你们。

提前感谢您的回答！

4

1 回答 1

2

我将这个错误保留了几个星期，并在本周再次开始研究它。我找到了解决方案。

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

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

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

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

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

于 2013-04-18T09:51:54.150 回答