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 row selection on grid

In a grid, there already is a selection model present. Grid panels use Ext.selection.RowModel by default.

But if there is a requirement to disable the selection model, here is what you can do.

 Ext.create('Ext.grid.Panel', {  
   renderTo: document.body,  
   store: userStore,  
   width: 400,  
   height: 200,  
   title: 'Application Users',  
   columns: [{  
     text: 'Name',  
     width: 100,  
     sortable: false,  
     hideable: false,  
     dataIndex: 'name'  
   }, {  
     text: 'Email Address',  
     width: 150,  
     dataIndex: 'email',  
     hidden: true  
   }],  
   listeners: {  
     beforeselect: function() {  
       return false;  
     }  
   }  
 });  

The below piece of code in the listener does the trick. It returns false because of which no action happens on click of any row.

 beforeselect: function() {  
   return false;  
 }  

Happy coding :)

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);  
     } });  
    }