代理从ExtJs存储发送乘法请求

Question

My app send multiply request to server each time I insert new item to store. When the first item inserted it calls POST once, one more item ... twice and so on.

Im new at ExtJs, so can you help me in solving some qustions:

1. First of all what the sync method do, why (GET, POST, PUT, DELETE) methods are not called without store.sync() method invok?
2. Why my post method multiply requests?
3. Why store.remove() (DELETE) method throws 400 error ( Bad request ) when the PUT method works fine?

Thank you in advance

my edit controller:

Ext.define('MVC.controller.Edit', {
extend: 'Ext.app.Controller',


init: function () {
    this.control({
        'editForm > button#SaveRecord': {
            click: this.onSaveButtonClick
        },
        'editForm > button#DeleteButton': {
            click: this.onDeleteButtonClick
        }
    });
},

onSaveButtonClick: function (btn) {
    //get reference to the form
    var detailView = btn.up('editForm');

    //get the form inputs
    var data = detailView.getValues();

    //see if the record exists
    var store = Ext.getStore('TestStore');
    console.log(data.id);
    var record = store.getById(data.id);

    if (!record) {
        record = Ext.create('MVC.model.Note', {
            title: data.title,
            created: new Date(),
            updated: new Date(),
            text: data.text
        });

        store.insert(0, record);
        store.sync();
        Ext.MessageBox.alert('Created', record.id);
        return;
    }

    record.set(data);

    store.sync();
    //manually update the record
    detailView.updateRecord();
},

onDeleteButtonClick: function (btn) {

    //get reference to the form
    var detailView = btn.up('editForm');

    //get the form inputs
    var data = detailView.getValues();

    var store = Ext.getStore('TestStore');
    var record = store.getById(data.id);
    store.remove(record);
    store.sync();
}
});

Store :

Ext.define('MVC.store.TestStore', {
extend  : 'Ext.data.Store',

requires : [
    'MVC.model.Note'
],

storeId : 'TestStore',
model   : 'MVC.model.Note',
autoLoad: false,
proxy: {
    type : 'rest',
    url: 'rest/notes',
    actionMethods : {
        create  : 'POST',
        read    : 'GET',
        update  : 'PUT',
        destroy : 'DELETE'
    },
    reader: {
        type: 'json',
        rootProperty: 'data'
    },
    writer: {
        type: 'json'
    }
}
});

And model:

Ext.define('MVC.model.Note', {
extend: 'Ext.data.Model',

fields: [
    {
        name: 'id',
        type: 'string'
    },
    {
        name: 'title',
        type: 'string'
    },
    {
        name: 'created',
        type: 'date'
    },
    {
        name: 'updated',
        type: 'date'
    },
    {
        name: 'text',
        type: 'string'
    }
]
});

Answer 1

Try to use record's methods:

1)Add proxy to you'r model like this:

Ext.define('MVC.model.Note',{
extend: 'Ext.data.Model',

fields: [
{
    name: 'id',
    type: 'string'
},
{
    name: 'title',
    type: 'string'
},
{
    name: 'created',
    type: 'date'
},
{
    name: 'updated',
    type: 'date'
},
{
    name: 'text',
    type: 'string'
}],

proxy:
{
    type: 'rest',
    url: 'rest/notes',
    reader:
    {
        type: 'json'
    }
}
});

2)Now you can use methods: record.save() - will send PUT if it was loaded to store from server and record have id, or POST if this record was created with record.create() ; record.destroy() - will send DELETE to server with id of record; You can use Ext.ModelManager.getModel('Model_name').load(id) to send GET request to server for single record. 3)Use store.load() to GET array of records from server