EXTJS: Get response from store sync operation

EXTJS sync operation is usually used to synchronize the Store with its Proxy. This asks the Proxy to batch together any new, updated and deleted records in the store, updating the Store's internal representation of the records as each operation completes. [ref. EXTJS store sync() API]

The sync operations can happen over REST calls. In case of a REST call, if the sync operations fails, how to achieve the response? Here is the way:

 store.sync({  
   success: function(batch, operations){  
      Ext.msg.Alert("store sync successful");  
   },  
   failure: function(batch, operations){  
      var response = rec.operations[0].error.response;  
      var responseText = JSON.parse(response.responseText);  
      var errorMessage = responseText.message;  
   }  
 });  

Happy coding :)

EXTJS: sync operation multiple requests fired

Let me start with an example. Here is my sample model.

Ext.define('ExampleApp.model.Property', {
    extend: 'Ext.data.Model',
    idProperty: 'name',
    fields: [
        {name: 'name', type: 'string'},
        {name: 'value', type: 'string'}
    ],
    autoLoad: false,
    proxy: {
        type: 'rest',
        url: {sampleURL},
        batchActions: true, //batch all requests into one request
        reader: {
            type: 'json',
            rootProperty: ''
        },
        writer: {
            type: 'json',
            encode: false,
            writeAllFields: true,
            allowSingle: false //even if single object send it as an array
        }
    }
});

Here is my sync operation:

 var store = this.getExampleStore();  
 var newRecord = Ext.create('ExampleApp.model.Property');  
 var propertyName = rec.name;  
 var propertyValue = rec.value;  
 newRecord.set("name", propertyName);  
 newRecord.set("value", propertyValue);  
 store.add(newRecord);  
 store.sync({  
   success: function(batch, operations){  
      Ext.msg.Alert("store sync successful");  
   },  
   failure: function(batch, operations){  
      store.rejectChanges();  
   }  
 });  

To avoid the multiple requests for sync to be fired, here is the fix:

 batchActions: true 

This one config will not allow multiple requests to be fired. But all the new records added would be sent as a single request. But, what if you want only the last added record to be sent to the server. Consider this scenario: The record first added may have failed. You change the record data and add it to the store again. batchActions: true will send all the records as a batch. So all the previous records will also be sent.

 store.rejectChanges(); 

In the failure callback method of the sync operation, I called the above method, that removes all the records added till now. Hence only 1 record in the store remains to be sent to the server.

Happy coding :)

EXTJS: Disable required object validation on load

For one of my applications, I have a combo box. The combo box contains a list of values. This should be present on save. 

So, to put it simply, I added allowBlank: false to the combobox.

But on load, the field is validated and since it is empty, then it is shown having an error. This is usually not a good experience for users.

This is what that can be done to fix the issue:

1. Add a label separator as * for the users to understand that this is a mandatory field. 


2. On save, check for the availability of the combo box value.

 if (this.getComboBoxObject().getValue() != null && this.getComboBoxObject().getValue() != "") {  
      // do required operation  
 } else {  
      this.getComboBoxObject().markInvalid("Missing required field(s)");  
      return;  
 }  

 return  

will prevent any further processing on the method.

On click of Save/Submit button in the page, 





this is how the combo box would be validated. The same logic can be applied to any object in the form.

Happy coding :).

EXTJS: ItemSelector to restrict selections

EXTJS has some wonderful features called MultiSelector and ItemSelector.
These selectors allow the user to select multiple values in a given list of values.

I had a requirement to restrict the number of selected values to 1.

EXT JS has a simple solution for this problem:

In the itemselector xtype, set

 maxSelections: 1  

This above line will help you set the number of values that can be selected in the selector. If the selected number of values does not match the maxSelections value, then validation will fail.

EXTJS: Model ID appended to the AJAX/REST URL

While verifying the upgrade to EXTJS 6, I noticed that the URL(AJAX/REST) had the model id appended to it. Because of this, the calls were not reaching the server.

To mitigate this issue, I used the following fix:

Add the below snippet in the beforesync() listener in the store.

 beforesync: function(){  
    Ext.override(Ext.data.proxy.Rest, {  
     buildUrl: function(request) {  
      for (var i = 0; i< arguments.length; i++) {  
       if(arguments[i]._action != "read" && arguments[i]._records != undefined){  
        var argData = arguments[i]._records[0];  
        delete argData.id;  
       }  
      };  
      return this.callParent(arguments);  
     } });  
    }