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 ?

jacoviza · Answer 1 · 2016-07-25T13:39:50.443

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.

Thnaks for proving a fiddle: I extended your fiddle by using an alternate solution, ie, overriding the function in a class derived from proxy,Ajax: https://fiddle.sencha.com/#fiddle/lpe — Manu, Apr 23 '15 at 12:44
Christ on a bike! This is still a valid answer for Ext 6.x.x. — hbulens, Jan 24 '18 at 15:55

Yellen · Accepted Answer · 2015-04-24T03:28:11.133

3

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.

edited Apr 24 '15 at 03:28

answered Apr 22 '15 at 13:12

Yellen

1,785
16
35

Overriding afterRequest method right on proxy config seems to be working fine until 4.2 version. For some reason, from 5.0 onward it stopped working. I would like to know why. Documentation for that method remains the same from 4.2 to 5.1. – jacoviza Apr 22 '15 at 13:30
@jacoviza - It will still work in 5.0 but will not work from 5.1 onwards. Check the updated answer. – Yellen Apr 22 '15 at 14:09
Good finding there. It seems that this strict mode check was added since version 5.1 (not present in version 5.0) – jacoviza Apr 22 '15 at 15:04
*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 in your instance is not actually implemented by the class you're instantiating.* Indeed. Extending the AjaxProxy class and putting there my overrides silences the error, but I can't get to get a the **afterload** event to start a Message Box. – Manu Apr 23 '15 at 12:28
Can you give more details. Extending the AjaxProxy with just the overriden afterRequest should not make it behave anyway different from the one you were doing before 5.1 in your code. The lifecycle and all the other events should be handled the same way. – Yellen Apr 23 '15 at 12:37
A very simple solution is to make $configStrict: false, as suggested by @jacoviza. However, I'm not sure if there are repercussions. You can try it this way as well. – Yellen Apr 23 '15 at 12:39
@seram: got it too work by extending the proxy class, see this fiddle: https://fiddle.sencha.com/#fiddle/lpe – Manu Apr 27 '15 at 10:11

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

2 Answers2

Linked