ExtJs (6.0.0) rest service PUT request

Question

I am trying to PUT some data from my frontend (ExtJs) into my backend (Java, Spring). It does not work or I do not get the right clue...

I am on a Ext.grid.Panel where I use the following store which is (nicely) filled and displayed by a this.store.setData( myObject.data.items ) method:

Ext.define( 'NameOfThisClass', {
  extend: 'Ext.grid.Panel',
  ...

  store: Ext.create( 'Ext.data.Store', {
    data: [],
    autoLoad: false,

    proxy: {
        type: 'rest',
        url: '/somepath/theclass',
        reader: {
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'totalCount'
        },
        writer: {
            type: 'json'
        },
    }
  } ),

  ...
  // setting the data to be visualized
  setValue: function(myObject) {
    this.store.setData( myObject.data.items );
  }
  ...

  updateRecord: function(objectId, objectWithUpdateProperties) {
    // do what with the store and/or proxy?
  }
  ...
});

I display all entries in a table. The entries are not automatically loaded by the store but set from outside: setValue(myObject).
There is another store for initially loading the data. The data received is then splittet and forwarded in order not to have several requests.

I do get a nice visualized table whose entries are editable by the rowediting plugin.

Ok, so far the backgrounds.

When editing the table's data I run through some validations and gather more data via a modal dialog and then I have the data in order to send to the server by a call of updateRecord(objectId, objectWithUpdateProperties).

This sending is my problem. I do not know how to call/send a rest/put request which will be read by the server. (Receiving is not the problem, sending is).

I guess I somewhat need to trigger my store or the store's proxy. But how? It is not that I can simply tell my object to save since I do have more data than just the changed object's properties.

Can anyone help me here?

Answer 1

Don't need to use Ajax. You need to config proxy.api CRUD(C:create, R:read, U:Update. D:Delete) on RestProxy, from client side. Also, store must have autoSync:true.

At server side, need to config a @RestController for each one of CRUD (with JSON-Java encoder for parameters like Jackson or equivalent), that will acept JSON data. Take into account, that you may send only modified field (store.proxy.writer.writeAllFields: false ->>> default) or just the full record (.writeAllFields:true) to server. Here an example (inside store's constructor):

constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
me.callParent([Ext.apply({
                autoLoad: true,
                autoSync: true,
                model: 'Test.model.Country',
                proxy: {
                    type: 'rest',
                    api: {
                        create: 'country/create',
                        read: 'counrtry/list'
                        update: 'counrtry/update',
                        destroy: 'counrtry/destroy'
                    },
                    writer:{
                        writeAllFields : true
                    },
                    reader:{
                        root:'items',
                        totalProperty: 'rowCount'
                    }
                }
            }, cfg)]);
}

Extra note: For reading from server and load store automatically, just set store.autoLoad: true, and the corresponding @RestController method from server side. Take into account the store.reader params.

Answer 2

I normally use Ext.Ajax to achieve that, like this:

updateRecord: function(objectId, objectWithUpdateProperties) {

    Ext.Ajax.request({
       url: 'YourUrl',
        params: {       
            some_param: 'some_value',
            object_id: objectId,
            object_with_properties_param1: objectWithUpdateProperties.param1
        },
        success: function(response, opts) {     
            //Horay, Do something with the response
        },
        failure: function(response, opts) {
            //Oh nooooo            
        }
    });
}