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. 奇妙な点: ジョブ機能を 1 つ追加すると、他のすべての機能を編集でき、それらの変更はデータベースにコミットされます...

余談ですが、私は EXT の初心者で、独学で学ぼうとしていますが、ここ数日間、この問題について頭を悩ませていたので、皆さんに質問することにしました。

事前にご回答いただきありがとうございます。

4

1 に答える 1

2

私はバグを数週間放置し、今週再び調査を開始しました。回避策を見つけました。

グリッドを制御するコントローラーに次のコードを追加しました。 

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

レコードを更新すると、小さな赤い三角形がまだ表示されますが、e.store.sync() 関数が完了すると消え、データベース テーブルが更新されます。

100% クリーンなソリューションではありませんが、うまくいきます

誰かがより良い解決策を持っている場合は、私に知らせてください

于 2013-04-18T09:51:54.150 に答える