How do I extend Ext.Ajax?

Question

I use it quite often in an app I am making, so I would like to shorten it up if I can and make an extended class to handle all the callback logic in one place, I tried setting it up like this but fails when trying to load the class with:

Uncaught TypeError: Cannot read property 'isInstance' of undefined ext-all-debug.js:4136
ExtClass.registerPreprocessor.config ext-all-debug.js:4136
Ext.apply.doProcess ext-all-debug.js:4007
Manager.registerPostprocessor.uses ext-all-debug.js:6037
Ext.apply.require ext-all-debug.js:5771
Manager.registerPostprocessor.uses ext-all-debug.js:6004
Ext.apply.doProcess ext-all-debug.js:4007
Ext.apply.doProcess ext-all-debug.js:4008
Ext.apply.process ext-all-debug.js:3995
Ext.Class.ExtClass ext-all-debug.js:3911
Ext.ClassManager.create ext-all-debug.js:4676
Ext.apply.define ext-all-debug.js:5095
(anonymous function) Ajax.js:1 //My extended Ajax singleton

Here is how I try to call it

    var changes = e.record.getChanges();
    if (e.record.get('id'))
        changes.id = e.record.get('id');

    APP.ux.Ajax.request({
        url: '/admin/user/save/',
        params: changes,
        scope: this
    });

UPDATE That makes sense, I can't believe overlooked that, but I still get the same read property 'isInstance' of undefined error above. Here is how it looks now

And here is the simple class (Updated)

Ext.define('APP.ux.Ajax', {
extend: 'Ext.data.Connection',
requires: [
    'APP.ux.Msg'
],
singleton : true,
autoAbort : false,
request: function(config) {
    var cfg = config;

    Ext.apply(cfg, {
        success: function(form, action) {
            APP.ux.Msg.alert('Success', action.result.msg);
            //TODO: Add more logic here
        },
        failure: function(form, action) {
            switch (action.failureType) {
                case Ext.form.action.Action.CLIENT_INVALID:
                    APP.ux.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                    break;
                case Ext.form.action.Action.CONNECT_FAILURE:
                    APP.ux.Msg.alert('Failure', 'Ajax communication failed');
                    break;
                case Ext.form.action.Action.SERVER_INVALID:
                    APP.ux.Msg.alert('Failure', action.result.msg);
                    break;
            }
        }
    });
    this.callParent(cfg);
}
});

score 1 · Accepted Answer · answered Jun 14 '12 at 15:25

1

That's not gonna work like this. If you want to have failure/success handlers in one place - you need to overwrite standard request() method, something like this (this would go to your App.ux.Ajax class)

request: function(config) {
  var cfg = config;

  Ext.apply(cfg, {
    success: function(form, action) {
       APP.ux.Msg.alert('Success', action.result.msg);
       //TODO: Add more logic here
    },
    failure: function(form, action) {
       switch (action.failureType) {
        case Ext.form.action.Action.CLIENT_INVALID:
            APP.ux.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
            break;
        case Ext.form.action.Action.CONNECT_FAILURE:
            APP.ux.Msg.alert('Failure', 'Ajax communication failed');
            break;
        case Ext.form.action.Action.SERVER_INVALID:
            APP.ux.Msg.alert('Failure', action.result.msg);
            break;
       }
    }
  });

  this.callParent(cfg);
}

answered Jun 14 '12 at 15:25

sha

17,824
5
63
98

1

May be you don't need to `extend` standard Ajax class. just call it from your singleton class? – sha Jun 14 '12 at 15:36
Hmmm, that's probably the right idea. I will report back when I give it a shot. – Nathan Jun 14 '12 at 16:06
I am trying by extending `Ext.data.Connection` instead, since that is what Ajax extends & added the singleton & autoAbort params to my class. It is now trying to call the correct request method, but my parameters aren't being passed, from `return superMethod.apply(this, args || noArgs)` to `Ext.data.Connection.request`. Even though `args` variable has my url, and GET params. For some reason that `superMethod` isn't sending it. We'll see... – Nathan Jun 14 '12 at 16:46
Well. what exactly are you trying to accomplish? Why do you want to override such basic functionality? – sha Jun 14 '12 at 16:47
Because I use Ajax calls so much, with the callback logic, it bloats the controllers. I am trying to keep them tight. – Nathan Jun 14 '12 at 16:49
The only real space you can save - is error handling, right? And for that you might actually just create error reporting function which you will call from all your controllers. And if you want to handle Ajax exceptions in one place - you can do this by subscribing to Ext.Ajax event in your app class. – sha Jun 14 '12 at 16:52
Hmmm, interesting. I hadn't thought about that. I will look for documentation on subscribing to events. thanks! – Nathan Jun 14 '12 at 17:00
No problem. sometime you look for one solution, when other one might be even simpler :) – sha Jun 14 '12 at 17:06
I am guessing I need to subscribe to the requestcomplete & requestexception methods somehow in the controller. I will look into that, and maybe create a base controller that handles that. – Nathan Jun 14 '12 at 17:25
1

Yes. Here is similar question we discussed this : http://stackoverflow.com/questions/9682249/override-ext-data-connection-best-practice/9682966#9682966 – sha Jun 14 '12 at 17:25

How do I extend Ext.Ajax?

1 Answers1