Cannot override method afterRequest on Ext.data.proxy.Ajax instance when migrating an Ext JS 4 codebase

Question

Background: I want to be able to create a custom error mask for ajax loading errors, for ex. in case of network problems.

I am using the following code to create to create a a new Ext JS store, whose proxy I would like to extend with my own afterRequest function. The afterRequest function should send an afterload event, which is used by a utility function calling mask() on the widget.

var settingsStore = new Ext.data.Store({
  model: 'vmSettings',
  autoload: 'true',
  proxy: {
    type: 'ajax',
    url: 'ta-debian-7-wheezy-virtualbox.json',
    afterRequest: function(request, success) {
      this.fireEvent('afterload', this, request, success);
      return;
    },
    reader: {
      type: 'json',
      rootProperty: 'variables',
    },
  }

});

Now this code is loading withour error with Ext JS but fails on 5.1 with the message: Cannot override method afterRequest on Ext.data.proxy.Ajax instance

What could be wrong here ?

Answer 1

From @yellen finding I could tell that since version 5.1 a strict mode check was added to restrict function overrides. In this case I think it might be a bug, since that is an empty callback method intended to be overridden. Anyways, it is possible to pass this check by adding: $configStrict: false to the proxy config object. Probably they just made this kind of overrides to be explicitly declared.

This is how your code would look like:

var settingsStore = new Ext.data.Store({
  model: 'vmSettings',
  autoload: 'true',
  proxy: {
    $configStrict: false,
    type: 'ajax',
    url: 'ta-debian-7-wheezy-virtualbox.json',
    afterRequest: function(request, success) {
      this.fireEvent('afterload', this, request, success);
      return;
    },
    reader: {
      type: 'json',
      rootProperty: 'variables',
    },
  }

});

More info on $configStrict here.

Find a working fiddle here.

Answer 2

afterRequest is an empty function

From document -

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

From source code (5.0)

/** * Optional callback function which can be used to clean up after a request has been completed. * @param {Ext.data.Request} request The Request object * @param {Boolean} success True if the request was successful * @protected * @template * @method */

**afterRequest: Ext.emptyFn,**

To override this function, you'll have to extend "Ext.data.proxy.Ajax". Give a function definition in the child class and use that child class in your store as the proxy. FIDDLE

Why the exception occurs?

In Ext 5.1 - During configuring an instance of a class, by the Configurator inside the configure function, a strict check happens for function override and the exception is thrown if the function you've overridden a function in the intance's config.

Look up Ext.Configurator

Extract from the class where the exception is thrown from inside the configure function (there's another check inside the reconfigure function as well) -

 if (instance.$configStrict && typeof instance.self.prototype[name] ===
 'function') {
                         // In strict mode you cannot override functions
                         Ext.Error.raise("Cannot override method " + name + " on " + instance.$className + " instance.");
                     }

It is mostly safe to override $configStrict from true(default) to false, but not recommended as it is a private flag.

NOTE: A lot of changes are not really documented and it's best to look into the source code whenever these kind issues are encountered.