How to validate a checkcolumn using Ajax

Question

A checkcolumn in a grid needs to be validated before the user changes its state:

{
    xtype: 'checkcolumn',
    dataIndex: 'add',
    width: 70,
    text: 'Add',
    listeners: {
        beforecheckchange: 'onPermissionChangeCheckAllowed'
    }
}

At the moment onPermissionChangeCheckAllowed validates using sync Ajax, like:

onPermissionChangeCheckAllowed: function (chk, rowIndex, checked, record, e, eOpts) {
   var result = Ext.Ajax.request({
                  async: false,
                  url: '/checkUserPermission',
                  params: Ext.encode(record)
   });

   return result;
}

This works --but async: false freezes the browser (for a ms) and I would like to know: is there another option to make this validation? In fact the console shows the warning that this behaviour will be deprecated :-O

The grid is a pivot table (done with SQL, not with Ext Pivot), so it is necessary to send the exact checkbox co-ordinates since there is no valid id (i.e. submitting the record doesn't provide enough information about the column name and the id is an autogenerated Ext id).

Answer 1

It freezes because javascript is single threaded by nature. You should be either passing a permissions flag to the browser to create the logic to hide/disable the checkbox to the user AND validating on the server side.

If you really want to do an ajax call on each checkbox click (you absolutely shouldn't), you need to:

1. Block the change if it was clicked by the user
2. Send an ajax request
3. Set the checkbox pragmatically