Skip to content

Store Modify Method

Jump to bottom Edit New page
Ralph Schaer edited this page Jul 19, 2013 · 15 revisions

Server

####Create/Update

A method that handles create and update requests from a DirectStore is annotated with @ExtDirectMethod(value = ExtDirectMethodType.STORE_MODIFY). The method has either a parameter of type Collection or a single object. The return type is the same as the parameter.

  @ExtDirectMethod(value = ExtDirectMethodType.STORE_MODIFY)
  public List<Person> createOrUpdate(List<Person> newOrUpdatedPersons) {
    List<Person> result = Lists.newArrayList();

    for (Person person : newOrUpdatedPersons) {
      //for example insert/update person into database
      //set the id attribute if it's an insert and add it to the result collection
      result.add(person);
    }

    return result;
  }
  
  @ExtDirectMethod(value = ExtDirectMethodType.STORE_MODIFY)
  public Person createOrUpdate(Person person) {
    //insert or update person
    //set id if it's an insert
    return person;
  }

The data in the DirectStore will be updated after the server round-trip. Therefore the server method has the opportunity to change or reject data by simply return changed data or return nothing. A common use case would be adding the primary key to the object after a database insert.

The decision to use the collection or single object parameter depends on the use case on the client side. For example if autoSync on the Store is disabled the user can change multiple records without sending any data to the server. When he then starts a manual sync the Store sends multiple records to the server. In this case the methods needs the Collection parameter to receive all the changed/inserted rows. On the other hand if autoSync is set to true the Store sends, every time the user changes or inserts a record, a request to the server. In this case the server only get's one record at a time. The single object method is also appropriate if there is no store and the methods save() and destroy() from the Model class are used.

####Destroy Ext JS 3.x

Compared to create and update methods a destroy method only receives a collection with the ids and returns a collection with ids.

  @ExtDirectMethod(value = ExtDirectMethodType.STORE_MODIFY, entryClass = Integer.class)
  public List<Integer> destroy(List<Integer> destroyIds) {
    List<Integer> deletedPersonsId = Lists.newArrayList();

    for (Integer id : destroyIds) {
      ...
      deletedPersonsId.add(id);
    }

    return deletedPersonsId;
  }

The method can veto the destroy request by returning an empty collection.

####Destroy Ext JS 4.x and Sencha Touch 2

The way destroy methods work changed with Ext JS 4.x. The client now sends the whole object to the server like in the Create and Update methods. It also looks like there is no way to veto the destroy method any more. Although the server can simply ignore the delete request, but the user does not see the record anymore on the client side, as long he's not reloading the data.

@ExtDirectMethod(STORE_MODIFY)	
public void destroy(List<User> destroyUsers) {
  for (User user : destroyUsers) {
    //delete the user from the persistent storage 
    //or ignore the request
  }
}

Client Ext JS 3.x

On the client we need an instance of a JsonWriter. The listful property of the JsonWriter must be set to true. This way the writer always sends a list to the server even if there is only one insert, update or destroy record. Also the encode property must have the value false. If the writeAllFields is true all fields of a record will be sent to the server, if false only the changed fields are transmitted.

  var writer = new Ext.data.JsonWriter( {
    writeAllFields: true,
    listful: true,
    encode: false
  });

The create/read/update/delete methods are specified in the api configuration.

  var directStore = new Ext.data.DirectStore( {
    id: 'directStore',
    paramsAsHash: true,
    root: 'records',
    totalProperty: 'total',
    autoLoad: false,
    autoSave: true,
    successProperty: 'success',
    fields: ['id', 'firstName', 'lastName'],
    remoteSort: true,
    idProperty: 'id',
    writer: writer,
    api: {
      read: personAction.load,
      create: personAction.createOrUpdate,
      update: personAction.createOrUpdate,
      destroy: personAction.destroy
    }
  });

Client Ext JS 4.x and Sencha Touch 2

Configuring a DirectStore changed in Ext JS 4.x. It's still possible to specify everything in the store configuration but I prefer to create the model and the store class separately.

Ext.define('Person', {
  extend : 'Ext.data.Model',
  fields : [ 'id', 'firstName', 'lastName' ],
  proxy : {
   type: 'direct',
    api: {
      read: personAction.load,
      create: personAction.createOrUpdate,
      update: personAction.createOrUpdate,
      destroy: personAction.destroy
    },
    reader : {
     root : 'records'
    }
  }
});

var store = Ext.create('Ext.data.Store', {
  autoLoad: false,
  autoSave: true,
  model : 'Person'
});

Examples

Add a custom footer

Table of Contents

Clone this wiki locally