javascriptajaxextjsextjs5roweditor

How do I get ExtJS 5 AjaxProxy to save?


I'm upgrading an app to ExtJS 5, and I can't seem to get a grid using RowEditing to POST the edited record back to my server.

Ext.define("MyRecordDef", { extend: "Ext.data.Model" });

var MyEditor = Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 });

var MyStore = new Ext.data.Store({
        model:      "MyRecordDef",
        autoSync:   true,
        proxy: {
            type:           "ajax",
            url:            "ajaxurl.aspx",
            batchActions:   false,
            extraParams:    { Command: 'Save' },
            reader:         { type: "json", rootProperty: "rows" },
            writer:         { type: "json", encode: true, writeAllFields: true }
        }
    });

var MyGrid = new Ext.grid.GridPanel({
    store:      MyStore,
    plugins:    [ MyEditor ],
    columns:        [
        {
        id:             "fieldtoedit",
        dataIndex:      "fieldtoedit",
        editor:         new Ext.form.NumberField()
        }
    ]
});

The row editor comes up, I'm able to change the value and click the Update button, but then nothing happens. No request is made, no errors logged in the console.

I added the following:

MyGrid.on('edit', function (e) {
    alert('You are Editing ' + e.context.record.id);
    MyStore.sync();  // attempt to force a sync
});

I get the alert with the correct record number, but still no AJAX request. It's like ExtJS is completely ignoring the writer.

I don't have different endpoints for each CRUD operation, so I'm not using the api config option, it should be using the url.


Solution

  • First of all you must define rootProperty on writer when you use encode: true. Then after adding fields to MyRecordDef requests are sended.

    Working sample: http://jsfiddle.net/jjVwR/3/ (saving don't work, but you can see on console that request is send)