Sending data

After adding, editing, or modifying records into the store, we should send the data to our server. Ext JS allows us to do this by the use of a writer property (it has to set in the proxy). This writer will encode the data depending on the type of writer (JSON or XML). In order to archive this, let's create the CustomersSending.js file in the path appcode/store/customers. We will use the previous models we have created and place the following code:

Ext.define('Myapp.store.customers.CustomersSending',{
  extend:'Ext.data.Store',
  model: 'Myapp.model.Customer',
  autoLoad:false,
  autoSync:true,
  proxy:{
    type:'ajax',
    url: 'serverside/customers.json',
 api: {
 read : 'serverside/customers.json',
 create : 'serverside/process.php?action=new',
 update : 'serverside/process.php?action=update',
 destroy : 'serverside/process.php?action=destroy'
 },
    reader: {
    ()type:'json',
      rootProperty:'records'
          },
 writer:{
 type:'json',
 encode:true,
 rootProperty:'paramProcess',
 allowSingle:false,
 writeAllFields:true,
 root:'records'
 },
 actionMethods:{
 create: 'POST',
 read: 'GET',
 update: 'POST',
 destroy: 'POST'
 }
  }
});

The notable changes made on the code are:

  1. We set the api property: On this property, we will set URLs for each CRUD action method (create, read, update, and destroy).
  2. We set the writer property as a configuration object: Here, the important properties in the object are:
    • type:'json': This property will send the data in JSON format to the server.
    • encode: This property will make Ext JS encode the information before passing it to the server.
    • rootProperty: This property will be the name of the parameter containing the information.
    • writeAllFields: This property will pass all the records to the server. If we set it to false, then they will be sent only to the modified fields.
  3. We set the ActionMethods property: This property will set how the parameters that are passed by the store will be sent. In the code example, we set POST method for create, update, and destroy, and we set GET for read.
    Note

    Do note that create, update, and destroy will be triggered when the proper action takes place with the data. For example, if we add a new model/record in the store, then it will launch the create action, encoding and passing the data set in api property.

Now, let's create the HTML file sending_01.html, as follows:

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Extjs - Sending 01</title>
<link rel="stylesheet" type="text/css" href="../ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script src="../ext-5.1.1/build/ext-all.js"></script>
<script src="../ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript" src="sending_01.js"></script>
</head>
<body style="padding:10px;"></body>
</html>

And finally, the sending_01.js file looks as follows:

Ext.Loader.setConfig({
   enabled: true,
  paths:{ Myapp:'appcode' }
});
Ext.require([
  'Ext.data.*',
  'Myapp.model.Contract',
  'Myapp.model.Customer',
  'Myapp.store.customers.CustomersSending'
]);
Ext.onReady(function(){

var store = Ext.create("Myapp.store.customers.CustomersSending"); //Step 1
  store.load({ // Step 2 load  Store in order to get all records
    scope: this,
    callback: function(records, operation, success) {
      console.log('loaded records');
      Ext.each(records, function(record, index, records){
        console.log( record.get("name")  + '  - '  + record.data.contractInfo.contractId );
      });
      var test=11;
      console.log('Start adding model / record...!');
 // step 3 Add a record
      var mynewCustomer = Ext.create('Myapp.model.Customer',{
        clientId  : '10003',
        name: 'American Notebooks Corp',
        phone: '+52-01-55-3333-2200',
        website   : 'www.notebooksdemo.com',
        status    : 'Active',
        clientSince: '2015-06-01 10:35',
        contractInfo:{
          "id":99990,
          "contractId":"ct-00301-99990",
          "documentType":"DOC"
        }
      });
      store.add(mynewCustomer);

 // step 4 update a record

      console.log('Updating model / record...!');
      var updateCustomerModel = store.getAt(0);
      updateCustomerModel.beginEdit();
      updateCustomerModel.set("website","www.acmecorpusa.com");
      updateCustomerModel.set("phone","+52-01-33-9999-3000");
      updateCustomerModel.endEdit();

 // step 5 delete  a record
      console.log('deleting a model / record ...!');

      var deleteCustomerModel = store.getAt(1);
      store.remove(deleteCustomerModel);

    }
  });
});

In Step 1, we create the store instance. In Step 2, we load the records (load function); after the records are loaded, the callback function will be executed. At this point, the store has two records that come from the JSON file. So, we are ready to begin with the operations create, update, and delete.

In Step 3, we create a model/record; we set the data of this model/record, and then we add it to the store. As we set the property autoSync: true in the store, Ext JS will send the data to the server.

In Step 4,we update a record; in this case, we modified two properties and then called the endEdit() method of the model/record. After this method finishes, the store will launch the update URL and pass the data to the server.

And finally in Step 5, we select the second model/record of the store with store.getAt(1). Then, we tell the store to remove the record, and the record is deleted from the store. This will make Ext JS launch the destroy URL that we set.

Take a look at the following screenshot and notice the network behavior:

Sending data

In the screenshot, you will notice the request call for the update action. There is also the paramProcess variable sent to the server that contains all the data from the updated model/record. Now we need to work on the php (or server page), so that it performs the required actions in the server page.

上一章目录下一章